jQuery: slideshow complesso

Lo slideshow che presenterò in questo articolo è più complesso rispetto agli altri visti in precedenza, in quanto oltre all'effetto di scorrimento sono presenti un cursore mobile ed un'animazione su ciascuna slide. In linea di massima i princìpi sono gli stessi di molti altri slideshow, con l'unica eccezione che in questo esempio è necessario operare prima sul DOM. Vediamone i dettagli.

Abbiamo la seguente marcatura:

<div id="gallery">

  <div id="gallery-wrapper">
  
  	<div class="img-wrapper">
  	  <img src="1.jpg" alt="" />
  	</div>
  	
  	<!-- altre slide -->
  	  
  </div>

</div>

<div id="controls">

	
	<a href="#">
		<img src="1-thumb.jpg" alt="" />
	</a>
	
	<!-- altri link-->
		
	<div id="cursor"></div>

</div>

Notiamo che:

• la navigazione tra le slide avviene mediante i link posti all'interno dell'elemento controls, i quali a loro volta contengono delle miniature delle immagini
• il cursore di posizione è già stato inserito all'interno dell'elemento che contiene i controlli dello slideshow

Vogliamo che in ciascuna slide l'immagine principale scompaia per far posto alla miniatura e che il cursore segua il movimento del mouse e mantenga la posizione sul link corrente. Prepariamo il nostro CSS:

#gallery {
	width: 550px;
	height: 400px;
	position: relative;
	overflow: hidden;
	margin: 0 auto;
}

#gallery-wrapper {
	width: 3300px;
	height: 400px;
	position: relative;
}

div.img-wrapper {
	float: left;
	width: 550px;
	height: 400px;
	position: relative;
	background: #d34545;
}

div.img-wrapper img {
	width: 100%;
	height: 100%;
	display: block;
}

div.img-wrapper img.thumb {
	width: 100px;
	height: 100px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -50px 0 0 -50px;
	display: none;
}

#controls {
	width: 550px;
	margin: 1em auto;
	height: 95px;
	position: relative;
}

#controls a {
	float: left;
	width: 85px;
	height: 85px;
	margin-right: 5px;
}

#controls a img {
	display: block;
	height: 100%;
	width: 100%;
	border: none;
}

#cursor {
	width: 0px;
	overflow: hidden;
	height: 10px;
	background: #d34545;
	position: absolute;
	bottom: 0;
	left: 0;
}

La miniatura sarà posizionata in modo contestuale all'interno di ciascuna slide. Il cursore verrà spostato usando il posizionamento assoluto.

Con jQuery dobbiamo innanzitutto mettere in relazione i link presenti nella barra dei controlli con le slide corrispondenti. Inoltre dobbiamo copiare le miniature in ciascuna slide e assegnare loro la classe CSS thumb. Ecco come:

var wrapper = $('#gallery-wrapper', '#gallery');

$('div.img-wrapper', wrapper).each(function(i) {
  
    var $div = $(this);
    $div.attr('id', 'slide-' + (i+1));
    
    $('a', '#controls').eq(i).
    attr('rel', $div.attr('id'));
    
    var $img = $('a', '#controls').eq(i).find('img').clone();
    
    $img.attr('class', 'thumb');
    
    $img.appendTo($div);
  
  
});

1. abbiamo assegnato a ciascuna slide un ID progressivo usando l'indice dell'array usato nel ciclo each() (slide-1, slide-2 ecc.)
2. abbiamo assegnato a ciascun link nella barra dei controlli un attributo rel impostandolo sull'ID creato per ciascuna slide
3. abbiamo clonato ogni miniatura presente in ciascun link di controllo, le abbiamo assegnato la classe thumb e quindi l'abbiamo inserita in ciascuna slide

A questo punto la barra dei controlli e le slide sono collegate tra di loro e le miniature sono al loro posto all'interno di ciascuna slide. Ora possiamo implementare le animazioni principali:

$('a', '#controls').each(function() {
  
    var $a = $(this);
    var id = '#' + $a.attr('rel');
    var slide = $(id, wrapper);
    var left = slide.position().left;
    var thumb = slide.find('img.thumb');
    
    $a.click(function(event) {
    
      $('img.thumb', wrapper).hide();
      $('img', wrapper).not('img.thumb').show();
    
      wrapper.animate({
        left: - left
      }, 'slow', function() {
      
      
        $('img', slide).not('img.thumb').
        fadeOut('slow', function() {
        
          thumb.fadeIn('slow');
        
        
        }); 
      
      
      });
    
    
      event.preventDefault();
    
    });
   
   // continua
});

Quando si clicca su una miniatura, usiamo l'ID ottenuto unendo il carattere # con il valore dell'attributo rel di ciascun link per selezionare la slide corrispondente. Di questa slide useremo l'offset sinistro per far scorrere il contenitore principale. Quando l'effetto di scorrimento è completato, l'immagine principale della slide scompare per far posto alla miniatura. Ovviamente prima di tutto questo dobbiamo sempre resettare le immagini all'interno dello slideshow usando il seguente codice:

$a.click(function(event) {
    
 $('img.thumb', wrapper).hide();
 $('img', wrapper).not('img.thumb').show();
 
 // continua
});

Ora dobbiamo animare il cursore facendolo spostare quando l'utente muove il mouse su una miniatura:

$a.mouseover(function() {
    
  $('#cursor', '#controls').stop(true, true).animate({
    width: 85,
    left: $a.position().left
  });
    
    
    
});

La larghezza usata è la stessa di quella definita nel CSS. L'offset sinistro è calcolato usando l'offset corrente di ciascun link. Potete visionare l'esempio finale in questa pagina.