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+
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!
