jQuery: gestire le didascalie degli slideshow

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.