Tutorial jQuery – Gallery di Foto Con Effetto Zoom
Appuntamento con i tutorial su jquery, dove oggi andiamo a vedere come realizzare una galleria fotografica accativante.
In particolare vedremo come “unire” il plugin Photo Zoom Out Effect con Fancy Zoom, uno dei tanti cloni di lightbox.
Vediamo subito l’esempio, per capire dove si vuole arrivare.
Andiamo a vedere come realizzare la gallery.
Passo preliminare. Scarica i sorgenti
Come primo passo scarica i sorgenti del tutorial.
Passo 1. Inizializzazione dello script
Prima della chiusura del tag body, carica gli script che in questo caso saranno jquery e fancyzoom.
Passo 2. Inseriamo le foto
Ora vediamo il codice HTML necessario per inserire le foto, ampiamente commentato.
Codice per l’inserimento delle miniature. Viene mostrato come inserire le prime due; le altre si inseriscono allo stesso modo.
Codice per l’inserimento delle foto grandi (da scrivere subito dopo il codice per le miniature)
Passo 3. Un po’ di stile
Per quanto riguarda il css non è stato fatto niente di nuovo rispetto al plugin originale, quindi ti invito a leggere la pagina ufficiale del plugin dove è spiegato in che modo sono stati utilizzati gli stili CSS.
Passo 4. Applichiamo jQuery alla gallery
Non ci resta che applicare gli effetti alla gallery, sfruttando jQuery, inserendo queste righe di codice sempre prima della chiusura del tag body.
Guarda l’esempio
Scarica il sorgente
3 Commenti
Ciao, davvero interessante questo effetto. Ti vorrei fare una domanda. Una gallery simile è possibile inserirla in un post di un sito creato in wordpress?
Ciao e complimenti…
Ciao Lorenzo, bisognerebbe provare, ma credo che si possa implementare in wordpress. Appena trovo un momento libero provo e ti faccio sapere!
ciao, complimenti per il lavoro che svolgi intanto… 😉
volevo chiederti se c’era un modo per aggiungere i pulsanti “next/prev” nel momento in cui si fa l’ingrandimento …. ?
Grazie
Ciao