Fade gallery di immagini con jQuery Cycler

Corso jQuery
Creare applicazioni client-side col Framework jQuery

Scritto da Luca Ruggiero nella sezione Javascript

jQuery Cycler è una semplice funzione, scritta da Simon Battersby, che consente di creare una fade gallery di immagini in modo semplice e veloce, utilizzando il noto framework Javascript, ma senza necessità di avvalersi di ulteriori plug-in esterni.

Il funzionamento di Cycler è molto semplice: dato un elemento contenitore al cui interno sono presenti una serie di immagini (possibilmente delle stesse dimensioni), si applica una classe alla prima immagine per definirla come "copertina" dello slideshow di immagini, quindi un semplicissimo script di poche righe fa il resto (clicca qui per vedere la demo).

Vediamo quindi il codice HTML della nostra fade gallery:

<div id="cycler">
    <img src="1.jpg" class="active">
    <img src="2.jpg">
    <img src="3.jpg">
</div>

e così via per quante immagini ci interessa aggiungere.

Passiamo quindi al codice CSS, il cui scopo non è direttamente nascondere le immagini che non devono essere subito mostrate, bensì posizionarle e sovrapporle opportunamente:

#cycler
{
    position: relative;
}
#cycler img
{
    position: absolute;
    z-index: 1;
}
#cycler img.active
{
    z-index: 3;
}

Prima di passare al codice Javascript è opportuno includere jQuery nella nostra pagina di prova:

<script type="text/javascript" src="jquery.js"></script>

Passiamo quindi al motore dello script, rappresentato dalla funzione cycleImages() di cui segue il codice:

function cycleImages()
{
    var $active = $("#cycler .active");
    var $next = ($active.next().length > 0) ? $active.next() : $("#cycler img:first");
    $next.css("z-index", 2);
    $active.fadeOut(500, function(){
        $active.css("z-index", 1).show().removeClass("active");
        $next.css("z-index", 3).addClass("active");
    });
}

Per prima cosa individuiamo l'immagine attiva, quindi impostiamo con una condizione l'azione il passaggio da un'immagine all'altra, memorizzando le due operazioni in due variabili che ci torneranno utili a breve.

Stabiliamo da subito che le immagini a seguire dovranno avere una sovrapposizione 2 attraverso il valore z-index.

A questo punto all'elemento corrente applichiamo l'effetto fadeOut (quindi la dissolvenza in uscita con una velocità di mezzo secondo (500 millisecondi) e, all'interno della routine, rimuoviamo ed applichiamo la "classe attiva" come conviene al fine della buona riuscita della fade gallery.

Al posto dell'effetto fade, possiamo impostare l'effetto slide semplicemente modificando la seguente riga della funzione:

$active.slideUp(500, function(){

Concludiamo col richiamo alla funzione:

$(document).ready(function(){
    setInterval("cycleImages()", 3000);
})

Una volta caricata la pagina, gestendo l'evento attraverso jQuery, lanciamo la funzione con una temporizzazione di 3 secondi (3000 millisecondi) ed il gioco è fatto!

I più cliccati della sezione Javascript

:: jQuery Validation: validazione di un form con jQuery (107.883)

:: Breve guida a jQuery (98.555)

:: Le espressioni regolari in Javascript (84.978)

:: Gestione delle stringhe in Javascript (74.955)

:: Stampare una pagina col Dhtml (42.844)

:: Inserire in automatico lo slash nel formato data gg/mm/aaaa (41.562)

:: Menu orizzontale dinamico in Dhtml (37.180)

:: Gli Array in Javascript (35.935)

:: Temporizzazioni Javascript (31.612)

:: Istruzion condizionali in Javascript: if e switch (28.931)

IN EVIDENZA
DOWNLOAD