mooFader - image fader slideshow

Sunday, April 13, 2008

mooFader - image fader slideshow

i needed one for the website i was working on, so i made small class that works with mootools 1.11.
head:

<script type="text/javascript" src="mootools-1.11.js"></script>
<script type="text/javascript" src="moofader.js"></script>
<script>
var images = Array('<?=implode("','",glob('images/*.JPG'));?>');
window.addEvent('load', function(){ new mooFader('fader',images); } );
</script>

html:

<div style="position: relative; width: 390px; height: 390px;" id="fader">
	<img src="images/rado.JPG">
</div>

script:

var mooFader = new Class({

	options:{
		duration: 3000,
		fade: 1000
	},

	initialize: function(el,im,options) {
		this.setOptions(options);
		this.holder = $(el);
		if(!this.holder) return;
		this.starter = this.holder.getElement('img');
		this.starter.setStyle('position','absolute');
		this.im = im;
		this.faders = [];
		this.images = im.length;
		this.counter = 0;
		this.change.periodical(this.options.duration,this);
		new Asset.image(this.im[this.counter]);
	},

	change: function(){
		if(this.counter > this.images-1) this.counter = 0;
		var img = new Element('img',{
			'src'	: this.im[this.counter],
			'styles': { 'position':'absolute' }
		}).injectTop(this.holder);
		var fader = img.getNext();
		new Fx.Style(fader,'opacity',{ duration:this.options.fade, onComplete: function(el){ fader.remove(); } }).start('1', '0');
		this.counter++;
		new Asset.image(this.im[this.counter]);
	}
});

mooFader.implement(new Options, new Events);

Demo page can be found here.