jQuery: creare un plugin per slideshow

In questo articolo vorrei riassumere i concetti fondamentali alla base della creazione di un plugin per slideshow con jQuery. Non ci interessa per il momento aggiungere effetti spettacolari, ma soltanto capire il funzionamento del plugin nella sua forma più elementare. Ci interessa come oggetto di studio per approfondire la nostra conoscenza di un tipo di plugin per jQuery tra i più diffusi sul web. Vediamo insieme i dettagli.

Tipi di slideshow

Esistono diverse tipologie di slideshow con jQuery:

  1. slideshow automatici e ciclici (vedi il plugin Cycle)
  2. slideshow con controlli e interazione dell'utente (vedi Nivo Slider o Easy Slider)
  3. slideshow misti

Noi realizzeremo un plugin per uno slideshow con controlli. Questo slideshow è uno slideshow di immagini.

Cosa deve fare il plugin

Il nostro plugin deve:

  1. preparare le regole CSS per il contenitore esterno dello slideshow
  2. preparare le regole CSS per il contenitore più interno dello slideshow
  3. preparare le regole CSS per le immagini
  4. impostare le dimensioni dello slideshow
  5. impostare la velocità di scorrimento
  6. impostare l'elemento che servirà da contenitore più interno
  7. associare un evento click sui controlli che mandano avanti o indietro lo scorrimento

Struttura del plugin

Definiamo la struttura generale del nostro plugin:


(function($) {

	$.fn.slideshow = function(options) {
	
	
		var that = this;
		
		var settings = {
		
		
		};
		
		options = $.extend(settings, options);
		
		
		return that.each(function() {
		
		
		
		});
		
   };
})(jQuery);

La variabile that racchiude il riferimento all'elemento corrente. settings definirà le nostre opzioni predefinite.

Opzioni predefinite

Ci servono sei opzioni:

  1. un riferimento al contenitore interno dello slideshow
  2. la larghezza dello slideshow
  3. l'altezza dello slideshow
  4. la velocità dello scorrimento
  5. un riferimento al controllo che manda indietro lo slideshow
  6. un riferimento al controllo che manda avanti lo slideshow

var settings = {
		
			wrapper: '#slideshow-wrapper',
			width: 600,
			height: 400,
			speed: 1000,
			prevBtn: '#prev',
			nextBtn: '#next'
		
		
};

Impostazioni CSS

Il contenitore più interno avrà una larghezza pari alla somma della larghezza di tutte le immagini. Imposteremo la proprietà overflow sul contenitore principale in modo che venga mostrata una sola immagine alla volta. Le immagini saranno infine flottate:


var imgLength = $('img', that).length;
		
		that.css({
			width: options.width,
			height: options.height,
			position: 'relative',
			overflow: 'hidden'
	    });
	    
	    $(options.wrapper).css({
	    	width: options.width * imgLength,
	    	height: options.height,
	    	position: 'relative'
	    });
	    
	    $('img', that).css({
	    	'float': 'left',
	    	width: options.width,
	    	height: options.height,
	    	position: 'relative'
	    });

Creare le azioni

Abbiamo bisogno di un contatore da usare come indice per selezionare l'immagine corrente e spostare il contenitore interno della misura uguale all'offset sinistro dell'immagine corrente. Il contatore va incrementato sul bottone di avanzamento e decrementato sul bottone che manda indietro lo slideshow.

Ancora: se l'indice è minore di 0 o maggiore della lunghezza del set di immagini, dobbiamo resettarlo facendo anche in modo che non si abbia un fastidioso effetto di rewind veloce sulle immagini. Per ottenere un effetto istantaneo utilizzeremo il metodo css():


return that.each(function() {
		
			var index = 0;
			var $wrapper = $(options.wrapper);
		
			$(options.prevBtn).click(function(event) {
		  		
		    	index--;
		    	
		    	if(index < 0) {
		    	
		    		index = (imgLength - 1);
		    		$wrapper.css('left',  - ($('img', that).eq(index).position().left));
		    	
		    	    
		    	} else {
		    	
		    		var img = $('img', that).eq(index);
		    		var ratio = img.position().left;
		    	
		    		$wrapper.animate({
		    			left: - ratio
		    		}, options.speed);
		    	
		    	}
		    	
		    	
		  
		  
		    	event.preventDefault();
		  
		  	});
		  	
		  	$(options.nextBtn).click(function(event) {
		  	
		    	index++;
		    	
		    	if(index > (imgLength - 1)) {
		    	
		    		index = 0;
		    		$wrapper.css('left', 'auto');
		    	
		    	
		    	}
		    	
		    	var img = $('img', that).eq(index);
		    	var ratio = img.position().left;
		    	
		    	$wrapper.animate({
		    		left: - ratio
		    	}, options.speed);
		    	
		    	
		  
		  
		    	event.preventDefault();
		  
		  	});

		
		
		
});

Potete visionare l'esempio finale in questa pagina.

Torna su