Create a Quick MooTools Slideshow with Preloading Images

An article by qeqnes    No Comments

I’ve been creating a lot of slideshow posts lately. Why, you ask? Because they help me get chicks. A quick formula for you:

var numChicks = $$('.slideshow').length; //simple!

The following code snippet will show you how to create a simple slideshow with MooTools; the script will also preload the images and feature a progress message. Why preload images? They make the slideshow more elegant and you can avoid an onLoad mess. Oh, and chicks…loads and loads of chicks.

The HTML

<div id="slideshow-holder">
	<div id="progress"></div>
</div>

Basically just two DIVs which will hold content.

The CSS

#slideshow-holder	{ width:600px; height:400px; background:url(spinner.gif) center center no-repeat #fff; position:relative; }
#progress			{ position:absolute; width:100%; text-align:center; color:#999; top:225px; }

The image holder is given set dimensions, starts with a background spinner, and its position set to relative; the images will all be positioned absolutely. The progress holder is set right below the spinner.

The MooTools Javascript

window.addEvent('domready',function() {
	/* preloading */
	var imagesDir = 'epics/';
	var images = ['2.jpg','3.jpg','1.jpg','4.jpg','5.jpg'];
	var holder = $('slideshow-holder');
	images.each(function(img,i){ images[i] = imagesDir + '' + img; }); //add dir to images
	var progressTemplate = 'Loading image {x} of ' + images.length;
	var updateProgress = function(num) {
		progress.set('text',progressTemplate.replace('{x}',num));
	};
	var progress = $('progress');
	updateProgress('text','0');
	var loader = new Asset.images(images, {
		onProgress: function(c,index) {
			updateProgress('text',index + 1);
		},
		onComplete: function() {
			var slides = [];
			/* put images into page */
			images.each(function(im) {
				slides.push(new Element('img',{
					src:im,
					width: 600,
					height: 400,
					styles: {
						opacity:0,
						top:0,
						left:0,
						position:'absolute',
						'z-index': 10
					}
				}).inject(holder));
				holder.setStyle('background','url(logo.png) center 80px no-repeat');
			});
			var showInterval = 5000;
			var index = 0;
			progress.set('text','Images loaded.  MooTools FTW.');
			(function() {slides[index].tween('opacity',1); }).delay(1000);
			var start = function() {
				(function() {
					holder.setStyle('background','');
					slides[index].fade(0);
					++index;
					index = (slides[index] ? index : 0);
					slides[index].fade(1);
				}).periodical(showInterval);
			};

			/* start the show */
			start();
		}
	});
});

The first set of variable declarations represent basic settings for the preloader: images, preload-message-updating, etc. We pass our Asset.images instance an array of images. When each image loads, we update the status message. When every image has loaded, we remove the status message and start the slideshow. That’s it!

Of course the above could be turned into the class….I’m just slightly lazy…Feel free to turn it into a class and share with everyone!