MooTools preloading image rotator

I must have written six or seven of these bad boys since about January so I though one last time I’ll post it here and adapt it from time to time when I need it ! So here it is for both me any anyone else intrested

This takes a number of images pre loads them and will then fade between them

html

<div id=”image_rotator”>
<img src=”image/img1.jpg” style=”visibility: visible; opacity: 1″ />
<img src=”image/img2.jpg” style=”visibility: hidden; opacity: 0″ />
<img src=”image/img3.jpg” style=”visibility: hidden; opacity: 0″ />
</div>

css

#image_rotator {
position: relative;
width: 100px;
height: 100px;
}
#image_rotator {
position: absolute
}

javascript

window.addEvent(“domready”, function() {

var images = $$(‘#image_rotator img’) //the image
var imgTotal = images.length-1;
var pos = 0;

//set up an array of image src’s we want to preload
var imgSrcs = new Array();

//loop through array and stuff the images src’s into an array to use next
images.each(function (el,l) {
imgSrcs[l] = images[l].src;
});

//check all our images from array have loaded then start calling fadeImages every 5 seconds
var myImages = new Asset.images(imgSrcs,
onComplete: function(){
fadeImages.periodical(5000);
}
});

function fadeImages() {

//if we are at the end of list of images fade out last 1 fade in 1st else we fade current and fade in the next
if (pos == imgTotal) {
fadeImgOut=imgTotal;
fadeImgIn =0;
pos = 0;
}
else {
fadeImgOut=pos;
fadeImgIn =pos+1;
pos ++;
}

//do the fading stuff
var fadeOut = new Fx.Tween(images[fadeImgOut], {duration: 2000});
var fadeIn = new Fx.Tween(images[fadeImgIn], {duration: 2000});
fadeOut.start(‘opacity’,[1,0]);
fadeIn.start(‘opacity’,[0,1]);

}

});

Post by: Richard

Tags: , ,

5 Responses to “MooTools preloading image rotator”

  1. cssprodigy says:

    Could you show a demo/example. Thanks.

  2. admin says:

    Example of this in action can be seen on the following site…

    http://www.newhousetextiles.co.uk/homewares/

  3. Hi Richard,

    I’m trying to get this working on our website, to replace a flash image rotator. However, it doesnt seem to be working. Any suggestions?

    Shaun

  4. Richard says:

    http://www.rb-music.co.uk/2009/01/17/mootools-preloading-image-rotator-class/

    Try the following post its basically the same code but written into a class, you will find a source code download which should make setting things up easier for you! Any more questions give me a shout! R

  5. Richard says:

    The link I posted before didn’t work it should link now…

Leave a Reply