12/09/13 – Ho rilasciato la versione 2.1, finalmente si può chiamare come un plugin normale e funziona con più slider per pagina. Funzionante con l’utima release di jQuery, compatibile da ie7+

Download jQuery spotSlider v2.0

Un carousel per le news!

In primis: tutte le vecchie funzionalità del carousel sono state mantenute! Ti invito quindi, se non l’avessi già fatto, a leggere l’articolo relativo al jQuery newsSpot slider v1.0 in cui vengono illustrate passo passo. In seguito invece illustrerò brevemente le modifiche apportate.
Anticipo fin d’ora che anche il supporto per i browser è rimasto invariato in modo che non si perdesse nessuna fetta di utenza!

3 novità per la versione 2.0

Sono tre le novità introdotte, su vostra richiesta, nella versione 2.0. Vediamole 1 ad 1 analizzando brevemente il codice jQuery che è stato necessario implementare:

1. Temporizzatore con stati play/pause

Attraverso un semplice pulsante play/pause è ora possibile automatizzare lo scorrimento delle news con un tempo stabilito da noi!
Per quanto riguarda il codice html è stato sufficiente aggiungere un link e posizionarlo all’interno dello slider.

In jQuery utilizziamo la funzione toggle() per far sì che ad ogni click venga azionato o disattivato il timer e, allo stesso tempo, venga effettuato lo switch dell’immagine di background.

$("#toggleTime").toggle(  	//click in stato di pausa  	  function () {  		stopTimer();  		$(this).removeClass("tpause");  		$(this).addClass("tplay");  	  },    	  function () {  		startTimer();  		$(this).removeClass("tplay");  		$(this).addClass("tpause");  	  }  	);

La gestione del temporizzatore invece è affidata alle funzioni javascript setInterval() e clearInterval() che servono per lanciare e fermare delle funzioni ad intervalli regolari. In questo caso l’azione da ripetere sarà il semplice click sulla freccia destra! (ps: ricordatevi l’unbind per evitare i click multipli!)

//timer autoslide  	var myTimer;  	var timerbis;    	function startTimer() {  		myTimer = window.setInterval( function() {  			$('.news_slider-right').click();                          $('.news_slider-right').unbind();  		}, intTmp);  	};    	function stopTimer(){  		window.clearInterval(myTimer);  		clearTimeout(timerbis);  	}

Una piccola nota: la variabile intTmp permette di cambiare l’intervallo di tempo entro cui effettuare il cambio di slide. Sarà quindi sufficiente modificare questo parametro all’inizio dello script (espresso in millisecondi):

//Tempo auto-slide  	var intTmp = 5000;

2. Freccia di navigazione indietro a scomparsa

Nella versione precedente la freccia di navigazione sinistra era sempre visibile, ora invece, quando ci troviamo al punto di partenza, viene automaticamente rimossa! Per farlo è stato sufficiente verificare il caso in cui il “left” dello slider avesse valore 0. In tal caso, da verificare ad ogni click al termine dello scorrimento, la freccia viene nascosta.

//controllo posizione per comparsa frecce  	function checkFrecce(){  	if(boxUl.css("left")=="0px"){  		$(".news_slider-left").hide();  		}  	else{  		$(".news_slider-left").show();  		}  	}

3. Ritorno automatico al punto di partenza

Per concludere, è stato fatto un semplice controllo sulla posizione dello slider affinchè, raggiunto l’ultimo blocco di 4 news, lo slider torni automaticamente alla posizione iniziale. Il controllo implementato è il seguente:

...  boxUl.stop().animate({left:"0px"}  ...

Note d’uso e conclusioni

Questo script, come il precedente è rilasciato sotto licenza CC Non Commerciale. Sarei lieto di poter vedere i siti in cui implementerete lo script per poterli condividere con tutti i lettori. Infine, se qualcuno riscontrasse dei bug o avesse delle migliorie da apportare… fatevi avanti!

Download jQuery spotSlider v2.0