Lightbox: immagini da thumbnails

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.
  2. Includi anche il CSS di Lightbox.
  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:

    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:

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

Link:
Sito di Lightbox
Download dello script

Sergio Gandrus

Da marzo 2018 lavoro come Technical Manager presso PayClick
Programmo in ambiente LAMP e Angular 6.
Realizzo app mobile con Ionic Framework.
Sono papà e marito. Nel (poco) tempo libero mi piace leggere, il buon vino e viaggiare.

Ah, questo blog ha cambiato uso