var Slideshow = new Class({ initialize: function(containerId, myOptions) { // global vars this.myElements = $(containerId).getElements(myOptions.items); this.myElements.each(function(myElement) { myElement.setStyle('visibility', 'hidden'); }); if(this.myElements.length > 0 ){ this.currentIndex = 0; this.myElements[this.currentIndex].setStyle('visibility', 'visible'); ($type(myOptions.frameDelay)) ? this.frameDelay = myOptions.frameDelay : this.frameDelay = 3000; ($type(myOptions.loop)) ? this.loop = myOptions.loop : this.loop = false; ($type(myOptions.hasFade)) ? this.hasFade = myOptions.hasFade : this.hasFade = true; if(this.hasFade){ this.isFadeIn = false; this.initEffects(); this.zIndex = this.myElements.length; this.initElements(); //start slideshow this.goTo.delay(this.frameDelay, this, this.myElements[this.currentIndex]); this.currentIndex++; } else { this.zIndex = this.myElements.length; this.initElements(); this.goTo.delay(this.frameDelay, this, this.myElements[this.currentIndex]); } } }, initElements: function(){ var tmpZ = this.zIndex; this.myElements.each(function(myElement){ myElement.setStyle("z-index",tmpZ); tmpZ--; }.bind(this)); }, initEffects: function(){ this.myEffects = new Array(); this.myElements.each(function(myElement){ var newEffect = new Fx.Styles(myElement, { duration: 1000, transition: Fx.Transitions.linear, onComplete: this.goTo.bind(this) }); this.myEffects.push(newEffect); }.bind(this)); }, goTo: function(lastElement) { if(this.hasFade){ this.zIndex++; if(this.loop && this.isFadeIn && this.currentIndex == (this.myEffects.length)){ this.currentIndex = 0; } var nextEffect = this.myEffects[this.currentIndex]; var nextElement = nextEffect.element; nextElement.setStyle('opacity', 0); nextElement.setStyle("z-index", this.zIndex); this.fadeIn.delay(this.frameDelay, this, nextEffect); this.currentIndex++; } else { (this.currentIndex == (this.myElements.length-1) && this.loop) ? this.currentIndex = 0 : this.currentIndex++; this.zIndex++; var nextElement = this.myElements[this.currentIndex]; if($type(nextElement)){ lastElement.setStyle('visibility', 'hidden'); nextElement.setStyle('visibility', 'visible'); nextElement.setStyle("z-index", this.zIndex); this.goTo.delay(this.frameDelay, this, nextElement); } } }, fadeIn: function(effect) { this.isFadeIn = true; effect.start({ 'opacity': [0, 1] }); }, fadeOut: function(effect) { this.isFadeIn = false; effect.start({ 'opacity': [1, 0] }); } });