MENU' PRINCIPALE

Cerca tra le news
INFORMATICA
-
Android Numero news: 5
-
Applicativi Linux Numero news: 21
-
Applicativi Windows Numero news: 7
-
Cose Utili da Sapere Numero news: 12
-
Informazione Numero news: 6
-
Linux Guide e Trucchi Numero news: 30
-
Linux Ubuntu Numero news: 25
-
Mac Numero news: 3
-
Windows Guide e Trucchi Numero news: 21
INTERNET
-
Bimbi Numero news: 6
-
Programmazione Numero news: 8
-
Servizi Web Utili Numero news: 19
-
Siti Interessanti Numero news: 22
-
Varie Numero news: 13
Siti Partners
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
Immagini
VARIE
-
Barzellette Numero news: 87
-
Comunicazioni Numero news: 5
-
Cose Interessanti Numero news: 6
-
Daniel Capurro Numero news: 11
-
Ricette di Simo Numero news: 9
-
Tato Leo Numero news: 9
Notizie più viste
Importare dump di database molto grossi con phpmyadminNumero visite: 7620
php -q, eseguire script PHP sotto linuxNumero visite: 3629
Script PHP per listare tutti i files contenuti in una cartella remotaNumero visite: 3421
Lightbox, effetto jquery per zoom delle immaginiNumero visite: 2496
Jquery, il framework javascriptNumero visite: 2315
Twitter bootstrap, il miglior framework CSSNumero visite: 2143
Video Installazione BilugCMSNumero visite: 2063
Video Area Ammnistrativa del BilugCMSNumero visite: 2031