Realizzare una semplice galleria immagini con jquery

Realizzare una galleria immagine è un’operazione abbastanza comune per il buon web designer, di norma la sfida più grande consiste nel rinnovarsi e nell’aggiungere un approccio creativo ai vari progetti.

Per trovare una facile applicazione alle soluzioni più creative ci viene incontro jquery che mette a disposizione numerosi effetti e semplifica notevolemente l’utilizzo di javascript.

Vediamo come realizzare una semplice galleria di immagini in pochi passi.

Per prima cosa creiamo la nostra pagina html ed inseriamo all’interno un div con i relativi contenuti (nel nostro caso le immagini della galleria).

<div id="contenitore">
 <div><img src="images/1.jpg" alt="Immagine 1" /></div>
 <div><img src="images/2.jpg" alt="Immagine 2" /></div>
 <div><img src="images/3.jpg" alt="Immagine 3" /></div>
</div>

Una struttura così semplice ci permetterà in seguito di creare alternative accessibili o per media che non supportano questa soluzione.

Fatto questo partiamo con jquery, come sempre iniziamo definendo la partenza dello script al caricamento della pagina con la funzione ready.

$(document).ready(function(){

});

Come seconda mossa definiamo un evento che porterà l’utente a vedere l’immagine successiva. Nel nostro caso il click sul div (o meglio sulla prima immagine visualizzata).

$(document).ready(function(){
$('div#contenitore div').click(function () {

});
});

Ora possiamo definire il codice che farà scomparire l’immagine attuale e mostrerà l’immagine successiva

$(this).fadeOut(200, function() {$(this).next().fadeIn( 200);});

In questo modo definiamo un fadeOut sul div contenitore dell’immagine su cui abbiamo appena cliccato e definiamo come funzione di callback un fadeIn sull’immagine successiva.

Rimane un unico problema da risolvere, quando si arriva all’ultima immagine questa deve scomparire e far apparire la prima. Per risolvere utilizziamo un semplice if che valuterà se l’elemento cliccato è l’ultimo del div oppure no.

if ($(this).is(":last-child")) {
}else{
}

Per vedere lo script in funzione guarda questo esempio.

Info su Mauro Accornero

Sviluppatore e Web Designer Freelance, lavora a Milano dove collabora con Agenzie di Comunicazione ed Aziende del settore. Docente presso la Nuova Accademia di Belle Arti a Milano dove tiene corsi in ambito web per il dipartimento di Graphic Design e Art Direction.
Questa voce è stata pubblicata in Tutorial e contrassegnata con , , . Contrassegna il permalink.

21 risposte a Realizzare una semplice galleria immagini con jquery

  1. Manuel scrive:

    bello!
    proporrei: Piu’ jquery ppi tutti!

  2. Giacomo Ratta scrive:

    Molto bella!
    L’unica pecca è che non si capisce subito che bisogna cliccare sulle immagini per cambiarle. Quindi potresti metterci un piccolo pulsante leggermente trasparente al centro delle immagini che appaia nel momento in cui il mouse passa sopra le immagini.
    Comunque, ripeto, molto bella e particolare (soprattutto per la trasparenza portata al limite che aggiunge l’effetto “lampo”)

    • Mauro Accornero scrive:

      Vero, in effetti l’esempio non tiene molto conto dell’accessibilità, credo però che con poco lavoro si possa coniugare una versione più accessibile e funzionale. Al momento sto facendo qualche esperimento con ajax per capire fino a che punto sia corretto utilizzarlo. Spero a breve di poter condividere qualcosa, lavoro permettendo :)

  3. Giacomo Ratta scrive:

    Ciao Mauro.
    Riguardo i tuoi esperimenti ajax, se hai bisogno di una mano contattami.
    Di javascript e ajax so qualcosa…
    Ti posso consigliare un paio di manuali che mi sono stati molto utili.

    • Mauro Accornero scrive:

      Con ajax avevo già fatto un po’ di cose, ora sto utilizzando jquery e cerco di capire se la comodità offerta dal framework ha un prezzo e soprattutto dei limiti. Mi sono reso conto che l’utilizzo di una libreria ti porta a ragionare in maniera più standard ma non sempre è la cosa giusta. Ogni tanto mi chiedo se ha davvero senso inserire tutta la libreria di jquery in un sito dove al massimo c’è un tooltip.

      Per i manuali accetto volentieri consigli, ti chiederei quasi un listone di suggerimenti anche per contesti diversi da ajax. Posso sperare in un articolo a proposito sul tuo blog? :)

  4. Giacomo Ratta scrive:

    La versione minimizzata è di 50kb: secondo me ne vale la pena, anche solo per il fatto che è cross-browser, quindi non ti devi sbattere fra 4-5 browser (soprattutto IE).
    Di suggerimenti “seri” per adesso non è ho, anche perché non sono un esperto js :-) .
    Comunque, ti posso consigliare 2 libri:
    - Javascript La guida completa – McGraw Hill
    - Ajax. Seconda edizione – Hoepli/Wrox

    Se ti interessa particolarmente jQuery nel secondo libro viene utilizzato (ma anche altri framework); altrimenti puoi acquistare Learning jQuery che è solo in inglese.

    Suggerimento: nel caso entrassi in una libreria in cerca di libri su jQuery, non dare per scontato che se parlano di Ajax allora parlano di jQuery; la maggior parte utilizza Prototype.

    Per qualsiasi cosa contattami anche via email. Ciao!

  5. fra scrive:

    scustemi ma a meno non funziona!non so come mai.
    ho anche copiato e incollato il codice sorgente.

    vedo il link ad un file jquery.js che io invce non ho.cosa devo fare?

    • Mauro Accornero scrive:

      Vai sul sito di jquery (www.jquery.com) è una libreria javascript, ovvero un file con estensione .js che racchiude una serie di funzioni che ti permettono di utilizzare il codice mostrato nell’esempio. Devi scaricare la libreria e collegarla tramite il tag script nell’head alla pagina html.

  6. fra scrive:

    jquery-1.3.2.min.js

    ti riferisci a questo file?
    l’ho linkato nella mia cartella ma purtroppo non succede nulla. vedo i div uno sotto l’altro ma lo script non funziona.

    lo copio e lo incollo.

    $(document).ready(function(){
    $(‘div#contenitore div’).click(function () {
    if ($(this).is(“:last-child”)) {
    $(this).fadeOut(200, function() {$(“div#contenitore div:first”).fadeIn( 200);});
    }else{
    $(this).fadeOut(200, function() {$(this).next().fadeIn( 200);});
    }
    });
    });

    .
    .
    .
    .

  7. fra scrive:

    neanche ocn questo file va

    jquery-1.3.2.js

  8. fra scrive:

    la parte relativa ai div è:

  9. fra scrive:

    div id=”contenitore”

    img src=”upload/sergioromeo/f_1.jpg” alt=”Immagine 1″

  10. fra scrive:

    anzi….adesso funziona però mi fa vedere i div uno sotto l’altro. Appena clicco su uno inizia a funzionare altrimenti no.

  11. Barbara scrive:

    ciao Mauro,
    complimenti!!! ero alla naba ti ricordi?
    Comnque ti volevo chiedere: ma si possono mettere 2 applicazioni j query nella stessa pagina o interferiranno?

  12. Mauro Accornero scrive:

    Ciao Barbara! Sì, si possono mettere più script jquery (come è possibile inserire più script javascript nella pagina), occorre solo valutare la posizione di ogni script e gli effetti dell’esecuzione (es. se cerco di applicare un effetto ad un elemento che viene generato o caricato via javascript prima devo generare l’elemento e poi applico l’effetto, altrimenti si cerca di applicare l’effetto ad un elemento inesistente).
    Per gestire la cosa normalmento si utilizzano gli eventi.

  13. Barbara scrive:

    gli elementi ci sono tutti,
    pratcamente ho usato una navigazione tab di jquery e nella stesssa pagina vorrei mettere un carousel per scorrere delle immagini il problema è che se funziona uno non funziona l’altro come posso fare?

  14. Mauro Accornero scrive:

    Ti consiglierei di verificare nel javascript e nell’html che non stai applicando lo stesso script allo stesso elemento. Applicare due script sullo stesso elemento non è consigliabile, credo tu stia cercando di inserire un tab sul menu e lo slideshow sulle immagini, in questo caso verifica che i selettori non siano troppo generici. Ulteriore test che puoi effettuare da browser è vedere se la pagina presenta errori javascript e di che tipo. Ti consiglierei di provare con firebug che sicuramente ti permette di capire meglio quale sia il problema.

  15. Barbara scrive:

    ok grazie mauro!!

  16. Andy scrive:

    come faccio invece ad avere una lista di preview delle immagini, cliccando su di esse ho in un’altra area la foto cliccata più grande? Un po’ come per il tuo esempio, però con la lista di fotto sotto o laterale ad esempio. Considera che va applicato a diversi elenchi nella pagina… Come potrei fare??

    • Mauro Accornero scrive:

      Nel mio esempio le risorse sono statiche nel caso tu abbia diverse pagine (e penso diverse risorse) il funzionamento è lo stesso ma devi gestire l’insieme di immagini lato server e non lato client. Per il layout, ovvero thumbnail a sinistra, destra, sotto o sopra è solo una questione di html e css. Nel caso tu abbia un cms alle spalle o simili devi fornire le immagini come insieme, magari come array o come risultato della query. Il risultato finale è cmq un codice simile al’esempio.

  17. Finalmente una guida semplice e funzionante…accidenti saranno giorni che cerco e non ne trovo mai….grazie Fantastico. Le cose semplici son sempre le migliori

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

*

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>