jQuery: slideshow di contenuti avanzato

Vogliamo creare uno slideshow di contenuti composto da immagini e testo. Ciascuna slide dovrà prima mostrare solo l'immagine a piena grandezza, quindi ridimensionarla e mostrare il contenuto testuale sulla destra. Questo effetto dovrà avere luogo quando lo scorrimento di ciascuna slide è terminato. Vediamo come implementare questo effetto.

Partiamo dalla seguente struttura HTML:

<div id="slideshow">

	<ul id="slideshow-wrapper">
	
		<li>
		
		  <img src="1.jpg" alt="" />
		  
		  <div>
		  
		  	<h3>Slide 1</h3>
		  	
		  	<p>Lorem ipsum dolor sit amet.</p>
		  
		  </div>
		
		</li>
		
		<!-- si ripete -->
	</ul>
</div>

Il contenuto testuale sarà inizialmente nascosto e flottato a destra, mentre l'immagine apparirà prima a piena grandezza e quindi verrà ridimensionata per mostrare l'elemento alla sua destra:

#slideshow {
	width: 650px;
	height: 500px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}

#slideshow ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 3900px;
	height: 500px;
	position: relative;
}

#slideshow li {
	width: 650px;
	height: 500px;
	float: left;
	background: #333;
}

#slideshow img {
	float: left;
	width: 650px;
	height: 500px;
}

#slideshow div {
	float: left;
	width: 200px;
	height: 500px;
	background: #000 url(arrow.png) no-repeat 50% 80%;
	color: #fff;
	display: none;
}

#slideshow div * {
	width: 80%;
	margin: 0 auto;
	padding: 1em 0;
}

Con jQuery dobbiamo:

1. Creare un array contenente tutti i valori della proprietà left dell'oggetto position() per ciascuna slide
2. Creare un indice incrementale per accedere ai valori di questo array
3. Usare l'indice all'interno di un timer JavaScript per animare la slide corrente.

Iniziamo dall'array di offset:

var getSlidePositions = function() {

  var positions = [];
  
  $('li', '#slideshow').each(function(i) {
  
    var left = $(this).position().left;
    
    positions[i] = left;
  
  });
  
  return positions;
};

Quindi dichiariamo alcune variabili globali:

var slides = $('li', '#slideshow-wrapper');
var len = slides.length;
var index = 0;
var offsets = getSlidePositions();
var wrapper = $('#slideshow-wrapper', '#slideshow');

A questo punto creiamo il timer JavaScript con le animazioni principali. Questo timer sarà ciclico. Quando l'indice raggiungerà il numero di slide presenti nel set, resetteremo lo slideshow:

var interval = setTimeout(function() {
  
    index++;
    
    
    if(index == len) {
    
      index = 0;
      
      $('img', '#slideshow-wrapper').css('width', 650);
      $('div', '#slideshow-wrapper').hide();
    
    
    }
    
    var slide = slides.eq(index);
    
    wrapper.animate({
      left: - offsets[index]
    }, 1000, function() {
    
      slide.find('img').animate({
        width: 450
      }, 1000, function() {
      
        $(this).next().slideDown(1000);
      
      });
    
    
    });
  
    setTimeout(arguments.callee, 3000);
  
}, 500);

Il valore in millisecondi passato alla seconda chiamata a setTimeout() dovrà essere uguale alla somma delle durate delle singole animazioni (in questo caso 3000). Potete visionare l'esempio finale in questa pagina.