In un articolo precedente si è visto come realizzare una semplice presentazione di immagini con poche istruzione Javascript, utilizzando i cicli di temporizzazione per sostituire di volta in volta le immagini.
Lo script che analizzeremo consiste in un miglioramento grafico di quello precedente. Infatti verrà utilizzato un effetto sfumatura per sostituire un’immagine con la successiva.
A tale scopo è necessario utilizzare il framework JQuery, in particolare due funzioni del package Effects:
– fadeOut()
– fadeIn()

Vediamo innanzitutto il codice javascript completo:

// Richiamo il framework JQuery
<script type='text/javascript' src='jquery-1.4.2.min.js'></script>
<script type='text/javascript'>
// Realizzo una matrice contenente le immagini da presentare
var immagini = new Array();
immagini[0] = new Image();
immagini[0].src = "uno.jpg";
immagini[1] = new Image();
immagini[1].src = "due.jpg";
immagini[2] = new Image();
immagini[2].src = "tre.jpg";
immagini[3] = new Image();
immagini[3].src = "quattro.jpg";

var timeout;
var index = 1;

// Funzione che sostituisce un'immagine con la successiva
// JQUERY FADEOUT - FADEIN
function RotazioneImmagini(){
     $('#box_immagine').fadeOut(1000, function(){
		document.getElementById('box_immagine').src = immagini[index].src;
		$('#box_immagine').fadeIn(1000, function(){
			index++;
			if(index>=immagini.length){
				index = 0;
			}
			timeout = setTimeout('RotazioneImmagini();', 1000);
		});
	 });
}

// Funzione che permette di interrompere la rotazione delle immagini
function StopRotazione(){
     clearTimeout(timeout);
}
</script>

Il cuore dello script è la funzione RotazioneImmagini().
Prima di sostituire effettivamente un immagine con la successiva viene applicato un effetto di sfumatura in uscita (fadeOut) e solo al termine di questo viene effettuato lo scambio di immagini e quindi applicato un effetto di sfumatura in entrata (fadeIn). In altre parole, l’immagine viene sostituita mentre il box che le conterrà (box_immagine) non è visibile e quindi prima di effettuare il fadeIn.
Da notare i parametri e la nidificazione di funzioni per fadeOut e fadeIn. I parametri per queste due funzioni sono:

.fadeOut(durata effetto, funzione da eseguire al termine)
.fadeIn(durata effetto, funzione da eseguire al termine)

Nonostante il secondo parametro sia opzionale, nel nostro script abbiamo utilizzato il callback per eseguire in un preciso ordine le operazioni. Difatti solo dopo la sfumatura in uscita viene effettuata la sostituzione dell’immagine, e solo dopo la sfumatura in ingresso viene riattivato il ciclo di temporizzazione.
In alternativa al fade avremmo potuto utilizzare anche un effetto slide, sostituendo fadeOut con slideUp e fadeIn con slideDown.

Infine la porzione di html per completare la pagina:

<img src='uno.jpg' id='box_immagine'/>
<br/>
<input type='button' value='Start Presentazione' onClick='RotazioneImmagini();'/>
<input type='button' value='Stop Presentazione' onClick='StopRotazione();'/>

Cliccando qui è possibile vedere in esecuzione il codice completo