Realizzare gallerie di immagini con Lightbox2
Se non è il più popolare tra quelli utilizzati in rete, Lightbox è sicuramente tra i capostipiti degli script per visualizzare gallerie di immagini ed è quello che ha dato il nome a tutte le altre librerie di questo tipo.
Nato nei primi anni 2000, Lightbox (attualmente Lightbox2), è una libreria Javascript che permette di visualizzare ingrandimenti e gallerie di immagini in sequenza, facile da installare e configurare. Basato inizialmente sul framework javascript Prototype e la libreria di effetti Script.aculo.us, dal 2012 si appoggia al più noto jQuery. Il funzionamento è mobile friendly ed il codice è HTML5 valido.
Versione: 2.8.2 (13/12/2015)
Sito ufficiale: lokeshdhakar.com/projects/lightbox2
Richiede: jQuery (1.7+)
Download: circa 30 KB (js + immagini + css)
Nella distribuzione vengono fornite le versioni minificate di JS e CSS ed una versione dello script comprendente jQuery in un unico file.
Installazione
Scaricate e scompattate Lightbox2 sul vostro sito. Supponendo che la struttura di file e cartelle sia la seguente:
site/ ├── css/ │ └── lightbox.css ├── js/ │ └── lightbox.js ├── images/ │ ├── close.png │ ├── loading.gif │ ├── next.png │ └── prev.png ├── pagina.html ├── big_01.jpg ├── big_02.jpg ├── small_01.jpg └── small_02.jpg
per utilizzare la libreria è necessario includere il seguente codice all’interno del tag <head> della vs pagina.html:
<link rel="stylesheet" href="css/lightbox.css" type="text/css">
ed il seguente prima della chiusura del tag </body>:
<script src="js/lightbox.js" type="text/javascript"></script>
N.B.: Assicuratevi di aver incluso jQuery prima dello script Lightbox.
A questo punto, per ogni immagine da zoommare basterà aggiungere l’attributo data-lightbox, come nel seguente esempio:
<a href="big_01.jpg" data-lightbox="demo"><img src="small_01.jpg"></a> <a href="big_02.jpg" data-lightbox="demo"><img src="small_02.jpg"></a>
Per una galleria in sequenza utilizzare lo stesso valore di data-lightbox.
Se si vuole mostrare una didascalia sotto la foto è disponibile l’attributo data-title.
<a href="big_01.jpg" data-lightbox="demo" data-title="Didascalia foto"><img src="small_01.jpg"></a>
Compatibilità
Lightbox2 supporta IE9+ con jQuery v2.x. Per la compatibilità su IE6, IE7 ed IE8, utilizzate jQuery v1.x
Demo
Abbiamo realizzato una galleria di foto utilizzando Lightbox2 (opzioni base). Altre opzioni di personalizzazioni le trovate sul sito dell’autore.