Lightbox plugin con jQuery

Inizio con un primo articolo su un plugin per jQuery alternativo alla famosissima Lightbox JS di Lokesh Dhakar.

Questo plugin, semplice e facile da usare è una creazione di Leandro Vieira, per utilizzarlo è necessario scaricare la libreria jQuery e il plugin alla pagina dedicata al progetto.

Per utilizzarlo in qualsiasi documento html inserire all’interno dei tag Head i collegamenti ai file javascript:

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.lightbox-0.4.js" type="text/javascript"></script>

E sempre all’interno degli stessi tag il foglio di stile del plugin:

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

Non è necessario stravolgere il codice del documento html, basta richiamare la funzione con il tag scelto per contenere le immagini che avranno tale effetto:

$(function () {
  $('a[@rel*=lightbox]').lightBox() //Seleziona tutti i link che contengono "lightbox" nel'attributo rel
  $('#gallery a').lightBox() //Seleziona tutti i link con ID="galley"
  $('a.lightbox').lightBox() //Seleziona tutti i link con classe "lightbox"
  $('a').lightBox() //Seleziona tutt i link della pagina
})

E’ possibile definire alcune configurazioni da codice alla chiamata della funzione, senza modificare alcuna riga del codice del plugin, personalizzando il tuo jQuery Lightbox plugin:

• overlayBgColor: definisce il colore di sfondo (#000 nero di default)
• overlayOpacity: definisce l’opacità dello sfondo (0.8 di default)
• imageLoading: indirizzo immagine GIF di caricamento
• imageBtnClose: indirizzo immagine GIF pulsante di chiusura
• imageBtnPrev: indirizzo immagine GIF pulsante precedente
• imageBtnNext: indirizzo immagine GIF pulsante successiva
• containerBorderSize: dimensione spazio intorno all’immagine (10px padding di default)
• containerResizeSpeed: durata dell’effetto di ridimensionamento box (400 di default)