La filosofia alla base di jQuery può essere racchiusa nella frase: “Massimo risultato con il minimo sforzo”. Ecco allora questo tutorial su come creare un classico slideshow d'immagini casuali con jQuery e CSS.
Potete visionare un esempio funzionante qui.
Iniziamo creando il codice XHTML che corrisponderà alle immagini della nostra galleria; la questione si riduce ad una porzione di codice molto ridotta. Come vediamo, le immagini sono posizionate in una maniera scelta da noi, ma lo script andrà ad utilizzare la modalità random per visualizzarle; per far notare che le immagini sono realmente presentate in ordine casuale, le ho modificate scrivendoci sopra il nome e l'ordine con cui le ho scritte nel XHTML.
Il codice XHTML
<div id="slideshow">
<img src="img1.jpg" alt="Slideshow Immagine 1" class="active" />
<img src="img2.jpg" alt="Slideshow Immagine 2" />
<img src="img3.jpg" alt="Slideshow Immagine 3" />
<img src="img4.jpg" alt="Slideshow Immagine 4" />
<img src="img5.jpg" alt="Slideshow Immagine 5" />
<img src="img6.jpg" alt="Slideshow Immagine 6" />
<img src="img7.jpg" alt="Slideshow Immagine 7" />
<img src="img8.jpg" alt="Slideshow Immagine 8" />
</div><!-- end #slideshow -->
Il foglio di stile
Come si può facilmente vedere, nello snippet di codice presentato si richiama semplicemente una serie di immagini. Adesso possiamo controllare la presentazione con l'aiuto dei fogli di stile.
#slideshow {
position:relative;
height:350px;
}
#slideshow img {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}
#slideshow img.active {
z-index:10;
opacity:1.0;
}
#slideshow img.last-active {
z-index:9;
}
Il codice CSS ci permetterà di controllare lo stile del nostro slideshow, facendo posizionare le immagini, tutte della stessa dimensione, una sopra l'altra e facendo visionare quella attiva sopra tutte le altre utilizzando la proprietà z-index.
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.
