jQuery: slideshow a mosaico

Uno slideshow a mosaico con jQuery è semplicemente uno slideshow composto da un'immagine principale centrata e a piene dimensioni e diverse miniature di altre immagini disposte tutt'intorno all'immagine principale. Ciclicamente l'immagine principale verrà sostituita dalle miniature e il ciclo ricomincerà quando si sarà raggiunta l'ultima miniatura. La maggior parte dell'implementazione ruota intorno agli stili CSS: infatti dovremo centrare verticalmente e orizzontalmente l'immagine principale nel suo contenitore e disporre le miniature ai quattro lati. Vediamo l'implementazione.

Partiamo dalla nostra marcatura:

<div id="slideshow">
    <img src="1.jpg" alt="" class="topleft" />
    <img src="2.jpg" alt="" class="topright" />
    <img src="4.jpg" alt="" class="bottomleft" />
    <img src="5.jpg" alt="" class="bottomright" />
    <img src="3.jpg" alt="" class="center" />
</div>

Ogni immagine ha una diversa classe CSS che servirà per il posizionamento. Vediamo come:

#slideshow {
	width: 600px;
	height: 560px;
	margin: 0 auto;
	position: relative;
}

#slideshow .topleft,
#slideshow .topright,
#slideshow .bottomleft,
#slideshow .bottomright {
	width: 100px;
	height: 80px;
}

#slideshow .center {
	width: 500px;
	height: 380px;
}

#slideshow img {
	position: absolute;
}

#slideshow .topleft {
	top: 0;
	left: 0;
}

#slideshow .topright {
	top: 0;
	right: 0;
}

#slideshow .center {
	top: 50%;
	left: 50%;
	margin: -190px 0 0 -250px;
}

#slideshow .bottomleft {
	bottom: 0;
	left: 0;
}

#slideshow .bottomright {
	bottom: 0;
	right: 0;
}

Abbiamo usato il posizionamento contestuale per definire l'esatta posizione delle nostre immagini all'interno dello slideshow. A questo punto con jQuery dobbiamo fare in modo che l'attributo src dell'immagine con classe CSS center venga ciclicamente sostituito dall'attributo src delle quattro miniature.

Per prima cosa definiamo una funzione di utility che resituirà un array contenente i valori dell'attributo src delle quattro miniature. Abbiamo anche bisogno di selezionare le miniature all'interno del set di immagini, ottenere il numero di immagini in questo set, inizializzare il contatore da usare per il nostro timer che creerà l'effetto ciclico e memorizzare il valore originale dell'attributo src dell'immagine principale:

var images = $('img', '#slideshow').not('img[class=center]');
var origSrc = $('img.center', '#slideshow').attr('src');
var index = -1;
var len = images.length;

var getImagesSrc = function() {
   
 var srcs = [];
     
 images.each(function(i) {
     
   var src = $(this).attr('src');
       
     srcs[i] = src;
     
   });
   
  return srcs;
};

Il nostro timer incrementerà periodicamente il nostro contatore che andrà usato come indice per l'array generato dalla funzione getImagesSrc(). Quando il contatore raggiungerà il suo limite, ossia il numero massimo di immagini presenti nel set, verrà reinizializzato a -1 e il ciclo ricomincerà. Nel contempo useremo i valori dell'array per modificare l'attributo src dell'immagine principale. Resettando il contatore, riporteremo tale attributo al suo valore originale usando la variabile origSrc creata in precedenza:

var srcs = getImagesSrc();

var timer = setInterval(function() {
   
  index++;
     
  if(index == len) {
     
     index = -1;
       
     $('img.center', '#slideshow').attr('src', origSrc);
     
     
  }
     
  $('img.center', '#slideshow').attr('src', srcs[index]);
   
   
}, 1500);

Potete visionare l'esempio finale in questa pagina.