Fw

Wordpress Creative Developer

Tutorial jQuery – Gallery di Foto Con Effetto Zoom

  • Tutorial Jquery
  • -

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.

Tutorial jQuery- Gallery di Foto Speciale

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

  1. 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…

  2. Ciao Lorenzo, bisognerebbe provare, ma credo che si possa implementare in wordpress. Appena trovo un momento libero provo e ti faccio sapere!

  3. 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

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *