Our favorite javascript Slideshow class for MooTools
http://www.efectorelativo.net/laboratory/viewer/
It’s very easy to install and edit. I had syncronize the fading of two elements simultaniously. All I did was add property to the class like so:
-
-
var viewer2 = new Class({
-
-
mode: ‘rand’,
-
modes: [‘top’,‘right’,‘bottom’,‘left’,‘alpha’],
-
sizes: {w:480,h:240},
-
fxOptions: {duration:3000},
-
interval: 5000,
-
otherEl: null,
-
-
initialize: function(items,options){
-
if(options) for(var o in options) this[o]=options[o];
-
//
-
if(this.buttons){
-
this.buttons.previous.addEvent(‘click’,this.previous.bind(this,[true]));
-
this.buttons.next.addEvent(‘click’,this.next.bind(this,[true]));
-
}
-
this._current = 0;
-
this._previous = null;
-
this.items = items.setStyle(‘display’,‘none’);
-
this.items[this._current].setStyle(‘display’,‘block’);
-
this.disabled = false;
-
this.attrs = {
-
left: [‘left’,-this.sizes.w,0,‘px’],
-
top: [‘top’,-this.sizes.h,0,‘px’],
-
right: [‘left’,this.sizes.w,0,‘px’],
-
bottom: [‘top’,this.sizes.h,0,‘px’],
-
alpha: [‘opacity’,0,1,”]
-
};
-
this.rand = this.mode==‘rand’;
-
this.sequence = typeof(this.mode)==‘object’ ? this.mode : false;
-
this.curseq = 0;
-
this.timer = null;
-
},
-
-
walk: function(n,manual){
-
if(this._current!==n && !this.disabled){
-
this.disabled = true;
-
if(manual){
-
this.stop();
-
}
-
if(this.rand){
-
this.mode = this.modes.getRandom();
-
}else if(this.sequence){
-
this.mode = this.sequence[this.curseq];
-
this.curseq += this.curseq+1
-
<this.sequence.length>}
-
this._previous = this._current;
-
this._current = n;
-
var a = this.attrs[this.mode].associate([‘p’,‘f’,‘t’,‘u’]);
-
for(var i=0;i
-
<this.items.length;i++){>if(this._current===i){
-
this.items[i].setStyles($extend({‘display’:‘block’,‘z-index’:‘5′},JSON.decode(‘{"’+a.p+‘":"’+a.f+a.u+‘"}’)));
-
}else if(this._previous===i){
-
this.items[i].setStyles({‘z-index’:‘4′});
-
}else{
-
this.items[i].setStyles({‘display’:‘none’,‘z-index’:‘3′});
-
}
-
}
-
this.items[n].set(‘tween’,{onComplete:this.onComplete.bind(this),duration:5000}).tween(a.p,a.f,a.t);
-
}
-
},
-
-
play: function(wait){
-
this.stop();
-
if(!wait){
-
this.next();
-
}
-
this.timer = this.next.periodical(this.interval,this,[false]);
-
},
-
-
stop: function(){
-
$clear(this.timer);
-
},
-
-
next: function(manual){
-
-
this.otherEl.walk(this.otherEl._current+1<this.otherEl.items.length ? this.otherEl._current+1 : 0,manual);
-
this.walk(this._current+1<this.items.length ? this._current+1 : 0,manual);
-
},
-
-
previous: function(manual){
-
this.otherEl.walk(this.otherEl._current>0 ? this.otherEl._current-1 : this.otherEl.items.length-1,manual);
-
this.walk(this._current>0 ? this._current-1 : this.items.length-1,manual);
-
},
-
-
onComplete: function(){
-
this.disabled = false;
-
this.items[this._previous].setStyle(‘display’,‘none’);
-
if(this.onWalk) this.onWalk(this._current);
-
}
-
});
-
</this.items.length;i++){></this.sequence.length>
Implementation looked something like this:
-
-
if($$(‘.box2 img’).length >0) {
-
-
var V2 = new viewer($$(‘.box2 .Photo’),{
-
mode: ‘alpha’,
-
interval: 1000,
-
duration: 10000
-
});
-
var V3 = new viewer2($$(‘.brownboxtext’),{
-
mode: ‘alpha’,
-
interval: 1000,
-
duration: 10000,
-
otherEl: V2
-
});
-
$$(‘.brownbox’).set(‘opacity’,‘.9′);
-
-
}
Pretty easy!
