jQuery: slideshow con anteprima

Uno slideshow con anteprima in jQuery non è altro che un normale slideshow a cui sono state aggiunte delle thumbnail che mostrano l'anteprima delle immagini che compongono lo slideshow. Cliccando su ciascuna miniatura, lo slideshow scorre e mostra l'immagine corrispondente. I princìpi alla base di tale implementazione sono gli stessi di qualunque altro slideshow, con l'eccezione dei link che compongono l'anteprima. In questo caso, infatti, andremo ad associare a ciascun link un indice di un array contenente gli offset delle immagini tramite l'attributo rel. Vediamo l'implementazione.

La marcatura è intuitiva:

<div id="slideshow">

  <div id="slideshow-wrapper">

	<img src="1.jpg" alt="" />
	<img src="2.jpg" alt="" />
	<img src="3.jpg" alt="" />
	
  </div>

</div>

<div id="slideshow-preview">
	<a href="#"><img src="1-thumb.jpg" alt="" /></a>
	<a href="#"><img src="2-thumb.jpg" alt="" /></a>
	<a href="#"><img src="3-thumb.jpg" alt="" /></a>
</div>

Gli stili CSS sono esattamente gli stessi di qualunque altro slideshow con scorrimento, ad eccezione del floating usato per allineare le miniature:

#slideshow {
	width: 550px;
	height: 400px;
	margin: 0 auto;
	border: 5px solid #444;
	position: relative;
	overflow: hidden;
}

#slideshow-wrapper {
	width: 2200px;
	height: 400px;
	position: relative;

}

#slideshow img {
	width: 550px;
	height: 400px;
	float: left;
}

#slideshow-preview {
	width: 330px;
	margin: 0.5em auto;
	height: 100px;
}

#slideshow-preview a {
	width: 100px;
	height: 100px;
	float: left;
	margin-right: 5px;
}

#slideshow-preview a img {
	border: none;
	width: 100px;
	height: 100px;
	display: block;
}

Le miniature hanno dimensioni pari a 100 x 100 pixel. In realtà tali miniature potrebbero essere comodamente inserite con jQuery, ma tale soluzione presenta lo svantaggio dovuto ad un certo ritardo nella visualizzazione delle stesse. Per ottimizzare la performance si è deciso di inserirle già nella marcatura.

Ora dobbiamo semplicemente associare a ciascun link di ciascuna miniatura l'indice corrispondente dell'array di offset che andremo a creare. Quando un link viene cliccato, useremo l'indice associato per selezionare l'offset corrispondente ed azionare lo scorrimento:

var Slideshow = new function() {

  var wrapper = $('#slideshow-wrapper', '#slideshow');
  var images = $('img', wrapper);
  var len = images.length;
  var links = $('a', '#slideshow-preview');
  var index = -1;
  
  var getSlidePositions = function() {
  
    var positions = [];
    
    images.each(function(i) {
    
      var left = $(this).position().left;
      
      positions[i] = left;
    
    
    });
  
    return positions;
  };
  
  this.slide = function() {
  
    links.each(function() {
      
       index++;
       
       $(this).attr('rel', index);
    
    });
    
    var offsets = getSlidePositions();
    
    links.each(function() {
    
      var $a = $(this);
      var i = $a.attr('rel');
      
      $a.click(function(event) {
      
        wrapper.animate({
          left: - offsets[i]
        }, 'slow');
      
        event.preventDefault();
      
      });
    
    
    });
  
  };

}();

Possiamo usare l'oggetto appena creato in questo modo:

$(function() {

  Slideshow.slide();

});

Potete vedere l'esempio finale in questa pagina.