L'errore più comune che si commette (e che ho commesso anch'io) è quello di inserire le didascalie delle immagini di uno slideshow come elementi separati nella marcatura. In realtà si può utilizzare l'attributo alt o title delle immagini tramite jQuery. Infatti da un punto di vista semantico questi attributi già svolgono il compito di descrivere in qualche modo l'immagine, quindi aggiugere elementi non è necessario. È sufficiente un solo elemento il cui contenuto cambi dinamicamente.
Quello che abbiamo appena detto risulta più chiaro se osserviamo questa struttura HTML:
<div id="slideshow-wrapper">
<div id="slideshow">
<div id="slide-wrapper">
<img src="img/1.jpg" alt="Lorem ipsum" />
<img src="img/2.jpg" alt="Dolor sit" />
<img src="img/3.jpg" alt="Amet" />
</div>
<div id="caption"></div>
</div>
</div>
Con i CSS non dobbiamo fare altro che creare un posizionamento contestuale che permetta all'elemento caption di rimanere sempre in basso sullo slideshow:
#slideshow-wrapper {
margin: 4em auto;
width: 980px;
height: 323px;
position: relative;
background: url(img/wrapper.jpg) no-repeat;
overflow: hidden;
}
#slideshow {
width: 860px;
height: 260px;
position: absolute;
top: 50%;
left: 50%;
margin: -130px 0 0 -430px;
overflow: hidden;
}
#slide-wrapper {
width: 2700px;
height: 313px;
position: relative;
}
#slide-wrapper img {
float: left;
width: 860px;
height: 260px;
}
#caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
text-align: center;
font: 30px/40px "Times New Roman", Times, serif;
background: #222;
color: #fff;
opacity: 0.6;
filter: alpha(opacity=0.6);
display: none;
text-shadow: 1px 1px 1px #ccc;
}
Con jQuery useremo invece l'attributo alt dell'immagine corrente:
var Slider = {};
Slider.fn = new function() {
var timer = null,
index = 0,
wrapper = $('#slide-wrapper', '#slideshow'),
images = $('img', wrapper),
caption = $('#caption', '#slideshow');
this.slide = function() {
timer = setInterval(function() {
index++;
if(index == images.length) {
index = 0;
images.fadeTo(0, 1);
}
if(caption.is(':visible')) {
caption.hide();
}
wrapper.animate({
left: - images.eq(index).position().left
}, 1000, function() {
caption.text(index+1 + ': ' + images.eq(index).attr('alt')).fadeIn(500, function() {
images.eq(index).fadeTo(500, 0.5);
});
});
}, 2000);
};
}();
$(function() {
Slider.fn.slide();
});
Abbiamo usato l'indice incrementale per visualizzare la numerazione prima dell'attributo alt dell'immagine. Come vedete l'elemento che contiene la didascalia è sempre lo stesso, ma il suo contenuto cambia ogni volta. Abbiamo pertanto risparmiato alcune righe di codice.
Potete visionare l'esempio finale in questa pagina.