•  

BlogFree

Wiki - Gallery

    Cos'è


    Il tag GALLERY permette di creare una galleria delle vostre immagini tramite diversi effetti personalizzabili.
    Le immagini possono essere quelle del vostro album oppure quelle prese dal web o pubblicate tramite tinypic o simili.

    Opzioni principali


    Inserendo semplicemente
    CODICE
    [GALLERY]
    vengono prese le immagini che sono state segnate come pubbliche nel vostro album.

    CODICE
    [GALLERY=XXX]
    Prende le immagini che sono state segnate come pubbliche dall'album dell'utente che ha come ID il numero XXX.

    CODICE
    [GALLERY=type:2]
    Con type=2 si ottiene una visualizzazione con miniature ridotte a 50 pixel di larghezza e senza didascalia (questo tipo di visualizzazione è la stessa usata per il tag [FRIENDS]).

    CODICE
    [GALLERY=type:3]
    Con type=3 si ottiene una visualizzazione con miniature normali e con didascalia.

    Senza specificare il parametro type verrà usata una visualizzazione di tipo slideshow.

    Selezione di gruppi di immagini contrassegnate da etichette


    CODICE
    [GALLERY=tag:etichetta1,tag:etichetta2]
    Prende le immagini che hanno l'etichetta "etichetta1" e "etichetta2".
    È possibile utilizzare anche una sola etichetta o più di due (seguendo il formato tag:etichetta1,tag:etichetta2,tag:etichetta3,ecc.).

    Effetti e tempi


    È possibile personalizzare gli effetti e i tempi dello slideshow.
    CODICE
    [GALLERY=par:effect_slide autoplay_2]
    Utilizza l'effetto slide e crea uno slideshow con il tempo di 2 secondi per ogni immagine.
    Un elenco completo dei parametri utilizzabili è presente più in basso.
    Per inserire più parametri bisogna separarli con uno spazio dopo la scritta "par:".


    CODICE
    [GALLERY]<IMG SRC="url_img1" ALT="titolo1"><IMG SRC="url_img2" ALT="titolo2"><IMG SRC="url_img3" ALT="titolo3">[/GALLERY]
    Crea uno slideshow con le immagini inserite (possono essere inserite anche più immagini).

    CODICE
    [GALLERY]<A HREF="link1"><IMG SRC="url_miniatura1" ALT="titolo1"></A><A HREF="link2"><IMG SRC="url_miniatura2" ALT="titolo2"></A><A HREF="link3"><IMG SRC="url_miniatura3" ALT="titolo3"></A>[/GALLERY]
    Crea uno slideshow e ogni immagine ha il suo link.

    CODICE
    [GALLERY]<A HREF="url_img1" REL="lyteshow[slide1]" TITLE="titolo1"><IMG SRC="url_miniatura1" ALT="titolo1"></A><A HREF="url_img2" REL="lyteshow[slide1]" TITLE="titolo2"><IMG SRC="url_miniatura2" ALT="titolo2"></A><A HREF="url_img3" REL="lyteshow[slide1]" TITLE="titolo3"><IMG SRC="url_miniatura3" ALT="titolo3"></A>[/GALLERY]
    Se avete a disposizione delle miniature che linkano a delle immagini grandi, con questo codice è possibile realizzare uno slideshow a tutto schermo.
    Nei codici dei link va aggiunto il parametro REL="lyteshow[slide1]".
    Se si hanno più slideshow in una stessa pagina bisogna differenziare il parametro slide1 inserendo un nome diverso per ogni slideshow.

    CODICE
    [GALLERY=0,par:effect_slide-top hide-alt_true autoplay_5 align-pagingbuttons_inside-top-right]<IMG SRC="url_img1" ALT="titolo1"><IMG SRC="url_img2" ALT="titolo2"><IMG SRC="url_img3" ALT="titolo3">[/GALLERY]
    Come prima ma con parametri di esempio per personalizzare lo slideshow.
    Quando si utilizza il tag in quest'ultima forma è sempre necessario aggiungere il parametro autoplay_n (n=numero di secondi).

    Esempi


    Le opzioni precedenti possono essere usate in combinazione (separate con una virgola all'interno del tag GALLERY) per soddisfare qualsiasi esigenza.

    Esempi:
    CODICE
    [GALLERY=XXX,tag:etichetta1,tag:etichetta2,par:effect_slide autoplay_2]

    CODICE
    [GALLERY=type:2,tag:etichetta2]

    Il tag GALLERY (a differenza degli altri) può essere usato anche nel codice HTML dei forum e nei messaggi.
    Attenzione: per poter essere usato nei messaggi non bisogna inserire accapo tra i codici delle varie immagini. Inoltre se si vuole che venga mantenuto il titolo delle immagini bisogna scrivere i tag IMG SRC e A HREF in maiuscolo.

    Parametri dello slideshow


    I seguenti parametri possono essere usati in combinazione (separati da uno spazio) dopo la scritta par:
    CITAZIONE
    Effetti
    effect_appear
    effect_resize
    effect_slide
    effect_slide-top
    Diversi tipi di effetto nel passaggio da un'immagine all'altra.

    Durata dell'effetto
    duration_2
    2 indica il numero di secondi di durata dell'effetto.
    Il numero 2 può essere modificato a piacimento.

    Autoplay
    autoplay_4
    4 indica il numero di secondi in cui verrà visualizzata l'immagine successiva.
    Il numero 4 può essere modificato a piacimento.

    Center
    center-elements_true
    center-elements_false
    center-width_150
    center-height_200
    Queste opzioni specificano se le immagini devono essere centrate e le dimensioni della gallery (150 e 200 si possono personalizzare).

    Hide
    hide-alt_true
    hide-buttons_true
    hide-paging_true
    hide-navigation_true
    Queste opzioni permettono di nascondere i vari elementi dello slideshow.

    Align
    align-alt_inside-top
    align-alt_inside-top-right
    align-alt_inside-bottom
    align-alt_inside-bottom-right
    align-alt_bottom
    align-alt_bottom-right
    align-pagingbuttons_inside-top
    align-pagingbuttons_inside-top-right
    align-pagingbuttons_inside-middle
    align-pagingbuttons_bottom
    align-pagingbuttons_bottom-right
    Tramite queste opzioni è possibile modificare la posizione dei vari elementi dello slideshow.

    Personalizzazione della GALLERY di tipo 2 (type=2)


    È possibile personalizzare la dimensione delle miniature e altri elementi tramite l'inserimento e la modifica dei parametri dei seguenti css:
    CITAZIONE
    .thumbs a {float:left; display:block; width:50px; height:50px; line-height:50px; overflow:hidden; position:relative; z-index:1; margin: 4px}
    .thumbs a img {float:left; width:50px}

    Al posto di 50px e 4px si mette quello che si vuole.

    Personalizzazione della GALLERY di tipo 3 (type=3)


    È possibile personalizzare le miniature tramite l'inserimento e la modifica dei parametri dei seguenti css:
    CITAZIONE
    .thumb {float:left; padding:8px; text-align:center}
    .thumb p {margin:0}