Tra le tante librerie Javascript spuntate fuori negli ultimi mesi, Lightbox è certamente una di quelle che ha ottenuto più consensi e implementazioni reali su diversi siti. Cosa fa? Intanto è stata pensata per essere applicata alle immagini. Meglio: allo schema miniatura/ingrandimento di immagini tipico di tutte le gallerie fotografiche sul web. Data una miniatura, l'ingrandimento avverrà nella pagina stessa, su un livello che si sovrappone a quello della miniatura che però rimane visibile in trasparenza. Credo che l'esempio valga più di tante parole. In questo articolo vedremo come sia semplice implementare una soluzione del genere, per chiunque, anche per chi è quasi totalmente a digiuno di nozioni su Javascript. Merito dell'autore e della bontà del suo lavoro. Un'ultima nota: l'esempio e l'articolo sono basati sulla versione 1 della libreria. Torneremo in un prossimo appuntamento sulle novità introdotte nell'aggiornamento.
Prima di iniziare, ecco il link al pacchetto zip che contiene tutti i file di cui parleremo nel corso dell'articolo:
- esempio.html - l'esempio principale;
- esempio_2.html - una versione rivista e corretta dell'esempio di base;
- lightbox.js - la libreria Javascript;
- lightbox.css - il foglio di stile che gestisce l'aspetto del livello di ingrandimento;
- lightbox_2.css - il foglio di stile modificato usato nel secondo esempio;
- close.gif - immagine usata come simbolo di chiusura del livello di ingrandimento;
- overlay.png - l'immagine PNG usata per dare la trasparenza al livello;
- loading.gif - la gif animata usata come indicatore di 'caricamento in corso';
- due immagini JPG usate come esempi.
La struttura HTML
Detto che l'uso di Lightbox si presta alla perfezione per gallerie con molte immagini, nell'esempio si è usata una sola foto. Nel caso di uso su gallerie, basterà riportare lo schema su tutte le immagini. Ecco la parte che ci interessa:
<p><a href="barcellona-29.jpg" rel="lightbox" title="Barcellona - Museo di Arte Contemporanea">
<img src="barcellona-29-th.jpg" alt="Barcellona - MACBA" /></a>
</p>
<p><a href="barcellona-29.jpg" rel="lightbox" title="Barcellona - Museo di Arte Contemporanea">Barcellona - MACBA</a></p>
Per prima cosa si inserisce la miniatura (barcellona-29-th.jpg) usando ovviamente il tag img. Si crea quindi un link all'immagine ingrandita (barcellona-29.jpg) racchiudendo l'immagine all'interno di <a>...</a>. Nulla di trascendentale, come si vede. Attenzione però. Il link presenta due aspetti da considerare. Primo e fondamentale: bisogna inserire l'attributo rel="lightbox". Secondo e opzionale: si può inserire una descrizione dell'immagine con l'attributo title. Il valore di questo attributo sarà usato come descrizione sotto all'ingrandimento.
Nell'esempio, a puro titolo dimostrativo, si è inserito anche un link testuale che attiva l'ingrandimento. Come si vede, la struttura del link è identica a quella vista sopra.
CSS e Javascript
Nella sezione <head> della pagina inseriamo i richiami alla libreria Javascript e al foglio di stile che definisce l'aspetto del livello di ingrandimento:
<script type="text/javascript" src="lightbox.js"></script>
<link rel="stylesheet" href="lightbox.css" type="text/css" />
A questo punto, è tutto fatto. Spendiamo però due parole sullo script e sul foglio di stile.
Per quanto riguarda il Javascript lightbox.js, mettiamo in evidenza le parti che è possibile personalizzare.
All'inizio, si trovano due variabili:
var loadingImage = 'loading.gif';
var closeButton = 'close.gif';
Servono, rispettivamente, a definire quali immagini usare come indicatore di caricamento in corso e come simbolo per la chiusura dell'ingrandimento (è la x presente all'angolo superiore destro). Se si intende usare altre immagini, si modifichino i valori di queste due variabili.
Più sotto, alla riga 366 del nostro JS, si trova questa dichiarazione:
objLink.setAttribute('title','Clicca per chiudere');
Definisce il testo che compare come tooltip passando con il mouse sull'immagine ingrandita. Si può personalizzare a piacere.
Lo stesso si può dire per il testo che compare in basso, sotto l'immagine, che si riferisce al tasto che è possibile usare per chiudere l'ingrandimento. Basterà intervenire su questa riga (la 407):
objKeyboardMsg.innerHTML =
'premi il tasto <a href="#" onclick="hideLightbox(); return false;"><kbd>x</kbd></a> per chiudere';
Ed ora il CSS (lightbox.css). Qui si può intervenire per personalizzare l'aspetto del livello sovrapposto. Per esempio, nella seconda demo, il bordo dell'immagine è nero e lo sfondo è grigio. È bastato cambiare la regola corrispondente del CSS da così:
#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
a così:
#lightbox{
background-color:#666;
padding: 10px;
border-bottom: 2px solid #000;
border-right: 2px solid #000;
}
A voi il piacere di intervenire su altri dettagli come i font e i colori.
