Simple slideshow de imágenes con Scriptaculous

Este es un slideshow hiper-simple donde en pocas líneas se explica la forma de crear transiciones utilizando script.aculo.us y por lo tanto, pude servir de base para quien quiera experimentar con el tema.

Como requiere de esa librería, primero que nada, debemos tenerla agregada y lo más simple es cargarla desde los repositorios de Google mismo:

<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js' type='text/javascript'></script>
<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js' type='text/javascript'></script>

Y ahora, el script en si mismo que podemos poner directamente en la plantilla o cargarlo desde un archivo externo:

<script type='text/javascript'>
//<![CDATA[
var delay = 4000; // la velocidad de las transiciones
var start_frame = 0; // comienza con la primera imagen

// esta es la función qu ejecuta las transiciones cada cierto tiempo
function start_slideshow(delay) {
setTimeout(fadeInOut(delay), delay);
}

// la función de las transiciones usando el efecto Appear se aplica a una lista cuyo ID es slide-images
function fadeInOut(delay) {
return(function() {
lis = $$('#slide-images>li');
new Effect.Appear(lis[1], { duration: 2, afterFinish: function(obj) {
lisFade = lis[0].remove();
lisFade.hide();
$('slide-images').appendChild(lisFade);
start_slideshow(delay);
}});
})
}

// todo se ejecuta cuando se termina de cargar la página
Event.observe(document, 'dom:loaded', function() {
var lis = $$('#slide-images>li');
if(lis.length > 1) for(i = 1; i < lis.length; i++) lis[i].hide();
});
Event.observe(window, 'load', function() {
if($$('#slide-images>li').length > 1) start_slideshow(delay);
});
//]]>
</script>

Y el estilo mínimo que en este caso, será para mostrar imágenes de 400x300:

<style type='text/css'>
#slideshowDEMO { /* es el DIV contenedor que dimensionamos y centramos */
height: 300px;
margin: 0 auto;
width: 400px;
}
#slide-images { /* es la lista con las imágenes */
display: block;
height: 300px;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
width: 400px;
}
#slide-images li { /* cada item de la lista */
display: block;
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
}
#slide-images li img { /* cada imagen */
display: block;
height: 300px;
width: 400px;
}
</style>

Como dije, todo es una simple lista de imágenes así que el HTML es algo similar a esto:

<div id="slideshowDEMO">
<ul id="slide-images">
<li><img src="URL_imagen_1" /></li>
<li><img src="URL_imagen_2" /></li>
.......
<!-- seguimos poniendo tantas imágenes como se nos ocurra -->
</ul>
</div>

Y el resultado final será algo como esto:

REFERENCIAS:Andrew Sellick