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