• Home /
• Argomenti /
• Programmazione /
• Lightbox, effetto jquery per zoom delle immagini

Lightbox, effetto jquery per zoom delle immagini

Effetto di sovrapposizione con focus sull'immagine

Programmazione

News Inserita Il 18/01/2013 da Federico Villa

 

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>

 

Con questo script le vostre immagini dovrebbero avere un effetto di questo tipo:

 

 

 

Le configurazioni di lightbox

Per consultare i possibili settaggi del plugin jquery lightbox, andate al link qui sotto:

 

http://leandrovieira.com/projects/jquery/lightbox/#extend

Citazione:
http://leandrovieira.com/projects/jquery/lightbox/#overview