jQuery: galleria di immagini con rotazioni

Per poter utilizzare le rotazioni e trasformazioni CSS3 in jQuery abbiamo bisogno del plugin jQuery 2D Transform che consente a metodi quali css() e animate() di supportare la proprietà rotate. Realizzare quindi una galleria di immagini con questo effetto di rotazione diventa semplice. Vediamo l'implementazione.

Abbiamo la seguente struttura DOM e HTML di partenza:

<div id="slideshow">

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

</div>

<div id="controls">
	<a href="#" id="rotate">Ruota</a>
	<a href="#" id="reset">Reset</a>
</div>

Un comando farà ruotare le immagini in senso orario e l'altro comando le riporterà nella posizione di partenza. Con jQuery abbiamo bisogno di un oggetto che:

1. crei un timer che esegua le animazioni in sequenza
2. associ le azioni ai due pulsanti
3. permetta una rotazione nei due sensi per riportare poi le immagini allo stato normale

In questo oggetto dichiariamo subito le proprietà private che verranno utilizzate nei vari metodi:

var Slideshow = new function() {
  
    var $images = $('img', '#slideshow');
    var totalImages = $images.length;
  
    var rotate = $('#rotate', '#controls');
    var reset = $('#reset', '#controls');
  
    var timeDiff = 1000, slideShowInterval;
        
    var index = -1;
    
    // continua
}();

Abbiamo:

1. $images: l'intero set di immagini
2. totalImages: il numero di immagini presenti (verrà usato dal nostro timer)
3. rotate, reset: i due pulsanti della galleria
4. timeDiff: l'intervallo di tempo del timer
5. slideShowInterval: il nostro timer (non ancora inizializzato)
6. index: l'indice che verrà usato col metodo eq() per selezionare l'immagine corrente nel set jQuery

Definiamo l'unico metodo pubblico che inizializzerà l'oggetto Slideshow:

this.init = function() {
    
      initHandlers();
    
};

Il metodo privato initHandlers() associa un evento click ai due pulsanti con le rispettive azioni:

var initHandlers = function() {
    
      rotate.bind('click', function(event) {
      
        startSlideshow();
      
        event.preventDefault();
      
      });
      
      reset.bind('click', function(event) {
      
        stopSlideshow();
        
        event.preventDefault();
      
      
      
      });
     
     
};

Questo metodo invoca a sua volta altri due metodi privati, startSlideshow() e stopSlideshow() definiti come segue:

var startSlideshow = function() {
    
    
      rotateImages(1);
      
    
}; 
    
var stopSlideshow = function() {
    
      rotateImages(-1);   
    
};

Come si può notare, il cuore dell'oggetto in questione è rappresentato dal metodo rotateImages(dir). Il parametro dir accetta due valori numerici: 1 per una rotazione e -1 per il ritorno allo stato normale dell'immagine selezionata:

var rotateImages = function(dir) {
    	  
	 	  
  var rotateTo = (dir == 1) ? '30deg' : '0deg';	  
	  
	  
	  slideShowInterval = setInterval(function() {
	  
	    index++;
	    
	    if(index == totalImages) {
	    
	    
	       index = -1;
	       
	       clearInterval(slideShowInterval);
	      
	   
	    
	    
	    }
	    
	    $images.eq(index).animate({
	      rotate: rotateTo
	    }, timeDiff);
	    
	     
	  
	  
	  
	  }, timeDiff);
};

Questo metodo inizializza il nostro timer, il quale a sua volta usa il contatore della proprietà index per selezionare le immagini del set. Quando il contatore raggiunge il limite del numero di immagini del set, viene resettato a -1 e il timer viene cancellato.

Notate come il metodo animate() ora accetti la proprietà rotate con questa sintassi:

rotate: 'ndeg'

dove n è un numero (positivo o negativo) e deg è la parola chiave che indica i gradi della rotazione.

Potete visionare l'esempio finale in questa pagina.