Nella puntata precedente di questo mini-tutorial, che ha lo scopo di creare uno slideshow di immagini gestito con il framework javascript MooTools, avevamo sviluppato la struttura XHTML del box che conterrà l’animazione e farcito il codice con un CSS per rendere gradevole, almeno per un minimo, il nostro box.
Oggi ci occuperemo di sviluppare la parte più interessante dello slideshow: il codice Javascript.
Per gestire il flusso dell’animazione abbiamo deciso di creare una semplice classe Javascript in modo da ottimizzare le varie operazioni e non avere una lista di funzioni disordinate e non ottimizzate.
Creiamo la nostra classe implementando la classe Options di mootools e impostando alcune opzioni che ci serviranno all’interno di essa.
var Slideshow=new Class({
Implements:Options,
options:{
interval:3000,
duration:1000,
leftArrow:'left-arrow',
rightArrow:'right-arrow'
}
Implementando la classe Options potremo poi, nel metodo initialize, utilizzare il metodo setOptions e dare la possibilità di re-impostare le opzioni ogni volta che la classe Slideshow viene istanziata. In particolare tra le opzioni vediamo i valori:
- interval -> l’intervallo di tempo (in millisecondi) che trascorre tra una animazione e l’altra
- duration -> la durata (in millisecondi) della transazione dell’animazione
- leftArrow -> l’id dell’elemento freccia precedente
- rightArrow -> l’id dell’elemento freccia successiva
Scriviamo ora il costruttore della nostra classe:
initialize: function(wrapper,options){
this.setOptions(options);
this.wrapper=wrapper;
this.imgs=this.wrapper.getElements('a');
if (this.imgs.length>1) {
this.imgs.each(function(img){
if (img.hasClass('hide')){
img.set('tween',{
duration:this.options.duration,
onComplete:function(){
if (img.hasClass('hide')) img.removeClass('hide');
}
});
img.tween('opacity',0);
} else this.selected=img.addClass('selected');
}, this);
}
$(this.options.leftArrow).addEvent('click',this.start.bind(this,['previous']));
$(this.options.rightArrow).addEvent('click',this.start.bind(this,['next']));
this.intervalID=this.autoStart.periodical(this.options.interval,this);
}
Analizzando le operazioni che offre il nostro costruttore possiamo notare che salvando in una proprietà di classe gli elementi con tag A che compongono il nostro slideshow ( this.imgs=this.wrapper.getElements(‘a’); ) impostiamo per ognuno di essi le opzioni della transazione che userà la classe Fx.Tween offerta da mootools:
img.set('tween',{
duration:this.options.duration,
onComplete:function(){
if (img.hasClass('hide')) img.removeClass('hide');
}
});
Notiamo, arrivando alle ultime tre righe di codice del nostro initialize che applichiamo i listener sulle due frecce direzionali, con i metodi addEvent di mootools, associando il metodo “start” che definiremo tra poco. L’ultima riga, invece, ci mostra la direttiva più interessante: l’autoStart dello slideshow richiamato ogni this.options.interval millisecondi.
Arriviamo ora al metodo start di cui abbiamo accennato poco sopra:
start: function(dir){
$clear(this.intervalID);
if (!$defined(this.selected)) this.selected=this.imgs[0];
if (dir=='next') {
if ($defined(this.selected.getNext()))
var next=this.selected.getNext();
else var next=this.imgs[0];
} else {
if ($defined(this.selected.getPrevious()))
var next=this.selected.getPrevious();
else var next=this.imgs[this.imgs.length-1];
}
this.selected.tween('opacity',0);
next.tween('opacity',1);
this.selected.removeClass('selected');
this.selected=next.addClass('selected');
this.intervalID=this.autoStart.periodical(this.options.interval,this);
},
Abbiamo detto, poco fa, che il metodo start viene richiamato ogni volta che l’utente clicca sulle frecce direzionali. Cliccando sulle frecce dobbiamo interrompere temporaneamente l’automatismo che permette di operare lo slideshow in modo temporizzato. Per fare ciò cancelliamo, come prima istruzione, la proprietà intervalID in modo da fermare l’automatismo in questione con la funzione $clear offerta da mootools.
Nelle righe centrali del metodo start noriamo che selezioniamo il prossimo elemento in base alla freccia selezionata: il precedente oppure il successivo. Teniamo a mente che se stiamo visualizzando l’ultimo elemento dello slideshow, questo deve ripartire da capo. Per provvedere a questa necessità abbiamo inserito il controllo:
if ($defined(this.selected.getNext()))
oppure
if ($defined(this.selected.getPrevious()))
Per operare la vera transazione utilizziamo il metodo tween che mootools fornisce ai nostri elementi, invece che istanziare una classe Fx.Tween, come già abbiamo visto nel metodo initialize.
Infine facciamo ripartire l’automatismo temporizzato per lo slideshow automatico delle immagini richiamando il metodo autoStart.
Proprio il metodo autoStart è l’ultimo della nostra breve classe. Esso non è altro che una sorta di metodo start in breve:
autoStart: function(){
if (!$defined(this.selected)) this.selected=this.imgs[0];
if ($defined(this.selected.getNext()))
var next=this.selected.getNext();
else var next=this.imgs[0];
this.selected.tween('opacity',0);
next.tween('opacity',1);
this.selected.removeClass('selected');
this.selected=next.addClass('selected');
}
Tramite le poche istruzioni del metodo autoStart il metodo estrae l’elemento successivo a quello selezionato. Gestendo l’opacità, infine, viene nascosto l’elemento selezionato e reso visibile il successivo.
Così la nostra classe è completa, ma per rendere funzionante lo slideshow bisogna istanziare la classe al caricamento della pagina:
window.addEvent('domready',function(){
new Slideshow($('slideshow'));
});
Istanziando la classe, passiamo al costruttore l’elemento contenente la lista degli elementi che fanno parte dello slideshow. Nel caso volessimo personalizzare le opzioni in base all’istanza dovremo soltanto aggiungere il secondo parametro, inserendo un Hash contenente la lista di opzioni da impostare.
Così il nostro slideshow Javascript è pronto e possiamo catturare l’utente del nostro sito con poche righe di codice e qualche immagine accattivante.
Scarica il file js con il codice sorgente completo.
