Crear un slideshow con MooTools

David Walsh nos enseña como crear rapidamente un slideshow de imágenes muy resultón con MooTools.

Podemos ver una demo de esta pasada de imágenes en este enlace.

Veamos el poco código necesario.

[sourcecode lang="html"]

[/sourcecode]

Creamos una capa donde se mostrarán las imagenes, y otra que es la que soportará la precarga de las imágenes.

[sourcecode lang="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; }

[/sourcecode]

Definimos las propiedades de las capas.

Y finalmente, el código javascript encargado de ir cambiando las imágenes.

[sourcecode lang="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();
}
});
});

[/sourcecode]

Y eso es todo, con esto tenemos un bonito slideshow.

Fuente: Create a Quick MooTools Slideshow with Preloading Images