Lightbox, effetto jquery per zoom delle immagini
Vediamo in questo tutorial l’uso di un plugin jquery molto utile per creare un effetto molto bello e usato nel web moderno. Lo zoom delle immagini con sovrapposizione sulla pagina stessa.
Il plugin che andiamo ad integrare si chiama Lightbox ed è sviluppato in jquery.
Scaricare jquery.lightbox
Scarichiamo intanto il pacchetto cliccando al link qui sotto
L’unica cosa di cui abbiamo bisogno per far partire lo script è del framework jquery e del plugin lightbox.
Esempio di lightbox
Vediamo un esempio veloce di come integrare il plugin jquery lightbox.
Cominciamo inserendo l’HTML
< div id="gallery"> < ul> < li>< a href="immagine1">< img src="immagine1" />< /a>< /li> < li>< a href="immagine2">< img src="immagine2" />< /a>< /li> < li>< a href="immagine3">< img src="immagine3" />< /a>< /li> < li>< a href="immagine4">< img src="immagine4" />< /a>< /li> < /ul> < /div>
Inseriamo ora lo script jquery
Questo script lo possiamo inserire prima o dopo l’HTML o nel tag HEAD, la cosa importante è farlo caricare dopo il completo caricamento della pagina, tramite $(document).ready
< script type="text/javascript">
$(document).ready(function(){
$('#gallery a').lightBox();
});
< /script>
Le configurazioni di lightbox
Per consultare i possibili settaggi del plugin jquery lightbox, andate al link qui sotto:
