Create a Quick MooTools Slideshow with Preloading Images

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 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 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!

Hey everyone! Before we get started, I just want to say it's damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...

With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements. CSS gradients are another step in that direction. Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...

Everyone loves Twitter. Everyone loves MooTools. That's why everyone should love TwitterGitter, a MooTools plugin that retrieves a user's recent tweets and allows the user to format them however the user would like. TwitterGitter allows the user to choose the number of...

I know I've harped on this over and over again but it's important to enhance pages for print. You can do some things using simple CSS but today's post features MooTools and jQuery. We'll be taking the options of a SELECT element and generating...

@hamburger:
Asset is part of mootools.more, go there http://mootools.net/more and download the js with Asset if you need this one only

@David:
I was doing a slideshow with gradient lightbox, and wanted to integrate some ready done mootools slideshow, so I went with this one. Did some refactoring to put it in a class and it works great! Thanks a lot.

We need here to activate the code this.parent()(wheelData, ct, options); at the end of the OnComplete
Inspite of the hack with arguments.callee._parent_ (seems depreciated now !)
we don't reach the method of the parent class MooWheel of MooWheel.Remote

How do you think we can do it now ?

Tony

Really cool script, g;ad I read the comments, couldn’t get it to work until I included more.js :)

LeNche

Every day I amaze your detailed examples. You’re perfect. Greetings from Serbia ;)

Chik

Your script looks like just what I need… but I can’t get it to work :-(
As nearly as I can tell, it’s not a path issue for the pics. I don’t know if I need Mootools 1.2.4 loaded… I don’t have it, and know nothing about it. Do I need that? Thanx!

Chik

Ooooops… never mind, I got it figured out. I just needed to walk away for a few minutes :-)
Desperately need sleep…

Deya

Hi, Im new in this page I’d like to know do I have to download something special to make it work? I put the code and I have the .js funtion file but It doesn’t work, can somebody help me ? thanks!