
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!