Uno slideshow con dissolvenza e assolvenza è un effetto molto semplice da implementare con jQuery se si conoscono i metodi fadeIn() e fadeOut(). Quello che implementeremo è un semplice slideshow con dei bottoni per la navigazione tra le immagini. A ogni bottone sarà associato un evento click che andrà ad incrementare o decrementare un contatore con cui selezioneremo l'immagine corrente tramite il metodo eq(). In tal caso verificheremo che il contatore non abbia superato il limite delle immagini presenti nello slideshow. Vediamo i dettagli dell'implementazione.
La marcatura è ridotta all'essenziale:
<div id="slideshow">
<img src="1.jpg" alt="" />
<img src="2.jpg" alt="" />
<img src="3.jpg" alt="" />
</div>
<div id="controls">
<a href="#" id="prev">Prec.</a>
<a href="#" id="next">Succ.</a>
</div>
I bottoni di controllo sono situati fuori dal contenitore delle immagini. Per adattare questo esempio ad un contesto live è sufficiente inserire entrambi i componenbti in un contenitore esterno aggiuntivo.
Il CSS usa il floating è l'overflow per mostrare una sola immagine alla volta:
#slideshow {
width: 500px;
height: 327px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#slideshow img {
width: 500px;
height: 327px;
display: block;
float: left;
}
#controls {
width: 500px;
margin: 0 auto;
text-align: center;
padding: 1em 0;
}
#controls a {
padding: 0.4em;
background: #444;
color: #fff;
font: bold small Arial, sans-serif;
text-decoration: none;
margin-right: 0.4em;
}
#controls a:hover {
background: #666;
}
Con jQuery andremo ad implementare un oggetto che conterrà un metodo pubblico chiamato slide() con cui gestire il tutto:
var Slideshow = new function() {
var images = $('img', '#slideshow');
var len = images.length;
var index = -1;
var prev = $('#prev', '#controls');
var next = $('#next', '#controls');
this.slide = function() {
prev.click(function(event) {
images.fadeOut(500);
index--;
if(index == -1) {
index = 0;
}
var img = images.eq(index);
img.fadeIn(2000);
event.preventDefault();
});
next.click(function(event) {
images.fadeOut(500);
index++;
if(index == len) {
index = 0;
}
var img = images.eq(index);
img.fadeIn(2000);
event.preventDefault();
});
};
}();
L'oggetto viene usato in questo modo:
$(function() {
Slideshow.slide();
});
Oltre alle verifiche già menzionate in precedenza, su ogni click dobbiamo anche inserire un effetto di dissolvenza sulle immagini ad eccezione dell'immagine corrente, che avrà invece un effetto di assolvenza. Questo farà in modo che solo l'immagine selezionata sia la protagonista dell'animazione e, soprattutto, sia l'unica visibile.
Potete visionare l'esempio finale in questa pagina.