LightBox la libreria javascript per la tua photogallery

Cos’è la LightBox.
Vi sarà capitato di dover adibire una parte del vostro sito come photogallery, magari una di quelle gallery con la possibilità di scorrere tra le foto con degli effetti grafici gradevoli, le soluzioni allora sono due, la prima che scarteremo è quella di realizzare da zero la propria galleria fotografica oppure come alternativa ricorrere ad una libreria o uno script già fatto.
In questo articolo parleremo di una libreria javascript per fotogallery scritta da Lokesh Dhakar, la LightBox o meglio LightBox2 la nuova versione. La LightBox è scritta in Javascript, per funzionare ha bisogno della libreria Scriptaculous, la quale a sua volta necessita della Prototype. Non preoccupatevi di tutte queste dipendenze, il punto forte della LightBox è proprio la facilità di utilizzo. In una fotogallery classica troviamo due elementi fondamentali, la lista delle immagini in formato ridotto (thumbnails) e i formati più grandi delle relative foto aperte di solito in un popup o in una nuova pagina del browser. Cosa ha la LightBox più di una galleria fotografica classica? Bene la LightBox interviene proprio nella gestione delle immagini ingrandite aperte con il click sulla thumbnail, a differenza della classica gallery non viene aperta in un popup (i quali vengono bloccati da alcune barre o software) ne vengono aperte in nuove finestre browser, quelle che accade è che la LightBox scurisce la pagina del vostor sito con le thumbnails mettendola in secondo piano ed in primo piano aprirà la vosta immagine ingrandita, facendola comparire con effetti “slider”, il risultato è una presentazione dell’ingrandimento dell’immagine molto bella e in stile web 2.0. In più se si vuole collegare più immagini tra di loro impartendo una semplice istruzione compariranno i pulsanti “next” e “prev” che permetteranno di navigare tra gli ingrandimenti delle immagini senza chiudere e ricliccare sulle thumbnails. Adesso passiamo alla parte operativa.

Inseriamo la LightBox nel nostro sito.
Per prima cosa ci rechiamo sul sito ufficiale della LightBox2, scarichiamo l’ultima versione, scompattiamo il tutto in una nuova cartella e notiamo che si compone di 3 cartelle contenenti 3 tipi di files: Css, Js, Images.
Copiamo queste cartelle nella root del nostro sito ed esaminiamo quale codice bisogna aggiungere alla nostra pagina web affinche si possa utilizzare la libreria LightBox.
Bisogna aggiungere del codice in due parti distinte della pagina, la prima parte dove vengono caricare le librerie Javascript ed il file con gli stili CSS deve essere inserita nella testa della pagina, ovverto tra i tag <HEAD> ed </HEAD>, il codice da aggiungere è il seguente:

La seconda parte di codice che bisogna aggiungere è relativa al link che aprirà la nostra immagine ingrandita.
Esempio di un link normale che dalla miniatura apre una immagine ingrandita:

ora per far si che venga utilizzata la libreria LightBox e non venga aperto come un normale link dobbia solamente aggiungere il seguente codice all’interno del link:
rel=”lightbox”

quindi ricapitolando il nostro link mostrato prima diventerà:

Tutto qui, non occore nulla altro per poter utilizzare la LightBox, l’implementazione è semplice come anticipato.
Prima ho accennato alla possibilità di collegare le immagini ingrandite tra di loro creando un gruppo navigabile tramite i pulsanti NEXT e PREV che compariranno rispettivamente al lato destro dell’immagine ingrandita e al lato sinistro, vediamo come ciò sia possibile.
Semplicemente bisogna identificare un gruppo di immagini e attribuirgli il codice di prima leggermente modificato, ovvero anzicchè:
rel=”lightbox” attribuiremo rel=”lightbox[nomegruppo]”, che nel nostro caso possiamo identificare come rel=”lightbox[fiori]”, aggiungendo questo codice sui link delle miniature dei fiori, le loro immagini ingrandite saranno collegate tra di loro.
Esempio di un set di 3 immagini collegate tra di loro: