JavaScript  »  Articoli  »  JQuery 

Una volta impostato il posizionamento dobbiamo passare a definire l'altezza che il div #slideshow conterrà. Questo perché altrimenti si andranno a vedere le altre immagini “scorrere” al di sotto di quella impostata.

È importante notare anche che ho definito tre differenti valori di posizionamento con z-index per controlli diversi: così li potremo controllare meglio con lo script jQuery.

Nel codice CSS abbiamo impostato per il div #slideshow un posizionamento relativo e un'altezza di 350 pixel, considerando che tutte le immagini della nostra galleria sono delle stesse dimensioni.

Per quanto riguarda le immagini caricate all'interno del div #slideshow, queste avranno un posizionamento assoluto, un'opacità pari a zero ed uno z-index: 8; il valore più piccolo utilizzato, quindi sempre sotto. Questo accorgimento serve per evitare di avere un vuoto nella transizione tra un'immagine e l'altra.

La classe .active invece serve proprio per far risultare sempre sopra tutte le altre immagini quella attiva, e per questo impostiamo uno z-index: 10 e un'opacità pari ad 1. Questa classe serve anche per far portare l'immagine successiva in cima alla pila delle altre immagini.

Lo script jQuery

A questo punto lavoriamo sul framework jQuery e sul nostro script:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

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

Come si vede, preferisco sempre utilizzare il percorso assoluto per il richiamo di jQuery e ho creato un file denominato slideshow.js che racchiude il controllo del nostro slideshow.

Lo script è stato pensato per far apparire le immagini, in maniera casuale, sopra la prima che risulta attiva.

function slideShow() {
    var $active = $('#slideshow img.active');

    if ( $active.length == 0 ) $active = $('#slideshow img:last');

	// 3 linee che servono per far comparire le immagini in ordine casuale
	var $sibs  = $active.siblings();
    var rndNum = Math.floor(Math.random() * $sibs.length );
    var $next  = $( $sibs[ rndNum ] );

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideShow()", 4000 );
});

Il codice è suddiviso in tre tronconi principali: la prima porzione si legherà al CSS e alla classe .active, la quale farà comparire le immagini sopra la prima impostata da noi.

Il secondo pezzo, quello commentato, permette, in base ad una casualità matematica, la visione delle immagini che abbiamo scelto di abbinare.

Il terzo troncone controlla l'opacità delle immagini durante la fase di transizione e la velocità di cambio tra un'immagine e l'altra.

L'esempio è disponibile per il download.

Altri articoli

Altre guide

Altre newsletter