Daily Archives: 7 Febbraio, 2007

Sempre nell’ambito dei javascript che usano la metodica non intrusiva (unobtrusive) segnalo questo script, molto utilizzato, che è giunto alla sua versione 2.0.2

Lightbox permette di visualizzare le immagini da thumbnails creando un layer che oscura lo sfondo mettendo in evidenza l’immagine stessa.
L’esempio è più significativo di molte parole.
In questa versione sono stati aggiunti anche effetti di transizione tra un’immagine ed un’altra.

Come usarlo:

Parte 1 – Setup

1. Lightbox v2.0 usa il Framework Prototype e la libreria di effetti Scriptaculous. Per includere i 3 script usa il codice sottostante.

   <script type="text/javascript" src="js/prototype.js"></script>
   <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
   <script type="text/javascript" src="js/lightbox.js"></script>
   

2. Includi anche il CSS di Lightbox.

   <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
   

3. Controlla il CSS affinchè i file prev.gif e next.gif siano nel percorso corretto. Esegui lo stesso controllo per i file loading.gif e close.gif che sono richiamati all’inizio del file lightbox.js.

Parte 2 – Attivazione

1. Aggiungi l’attributo rel="lightbox" ad ogni link che vuoi usare con Lightbox. Per esempio:

   <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
   

   Opzionale: Usa l’attributo title se vuoi usare il caption.

2. Se hai creato un insieme di immagini relazionate fra loro aggiungi un nome di gruppo tra parentesi quadre nell’attributo rel. Per esempio:

   <a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
   <a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
   <a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
   

   Nessun limite al numero di immagini per pagina o per gruppo!

Link:
Sito di Lightbox
Download dello script