En este artículo vamos a mostrar una posible implementación de un pase de diapositivas, lo que a veces se conoce como "slide" de imágenes, utilizando el framework Javascript Mootools. Para ello tendremos que realizar una serie de pasos elementales, entre los que se encuentra la precarga de las imágenes con Javascript y la presentación secuencial de cada una de ellas, a las que aplicaremos un pequeño efecto de fundido.

Si lo deseas, puedes comenzar por observar qué es lo que vamos a realizar en una página aparte.

Verás que al acceder a la página comienza la precarga de las imágenes y, una vez se ha terminado y todas se encuentran disponibles en el navegador, se empiezan a mostrar una después de otra. Por complicarlo un poco, hemos realizado unos pequeños efectos especiales de fundido, pero con pocos cambios se podrían haber implementado cualquier otro tipo de efectos adicionales.

Para realizar este ejercicio, un primer paso sería precargar las imágenes, algo que ya hemos explicado en el artículo sobre la precarga de imágenes con Mootools. Asimismo, debemos conocer cómo se hacen los efectos con Mootools y cómo realizar eventos sobre efectos con Mootools.

El ejercicio se divide en tres partes:

a.- Precarga de las imágenes

var arrayImagenes = ["assets-imagenes/1579.gif", "assets-imagenes/1601.gif", "assets-imagenes/324.jpg", "assets-imagenes/1159.jpg", "assets-imagenes/1219.jpg"]
var imagenActual = 0;

var imagenesPrecargadas = Asset.images(arrayImagenes, {
   onComplete: function(){
      var efecto = new Fx.Tween($("muestraimagen"), {
         duration: 3000,
         onComplete: function(){
            $('muestraimagen').empty();
            muestraImagenDiapositiva();
         }
      });
      efecto.start('opacity',1,0);
   }
});

Primero definimos el array de rutas de las imágenes y una variable imagenActual para guardar el índice del array de la próxima imagen a mostrar. Luego cargamos todas las imágenes en el navegador con la función Asset.images(). A dicha función le indicamos un evento onComplete, que nos sirve para definir acciones una vez las imágenes están disponibles. En ese evento hacemos un efecto para ocultar la imagen que indicaba que la carga estaba siendo realizada y cuando se termina de realizar ese efecto llamamos a la función muestraImagenDiapositiva(), que se encargará de iniciar el slide.

b.- Función para mostrar una imagen

Ahora veamos la función muestraImagenDiapositiva(), que se encargará de mostrar la siguiente imagen del array de imágenes precargadas.

function muestraImagenDiapositiva(){
   imagenesPrecargadas[imagenActual].injectInside($("muestraimagen"));
   var efecto = new Fx.Tween($("muestraimagen"), {
      duration: 2000,
      onComplete: function(){
         ocultaImagenDiapositiva();
      }
   });
   
   efecto.start('opacity',0,1);
}

Esto lo realiza insertando la imagen siguiente, del array de imágenes precargadas, en la página. Luego continua creando un efecto de fundido, en la que se muestra la imagen cambiando la opacidad desde 0 hasta 1. La duración del efecto es de 2 segundos y cuando se termina de realizar se llama a la función ocultaImagenDiapositiva().

c.- Función para ocultar la imágen y pasar a la siguiente

Ahora veamos la última parte del ejercicio, con la función que se encargará de ocultar la imagen que se está mostrando y pasar a la siguiente del array de imágenes precargadas.

function ocultaImagenDiapositiva(){
   var efecto = new Fx.Tween($("muestraimagen"), {
      duration: 1000,
      onComplete: function(){
         $("muestraimagen").empty();
         imagenActual = (imagenActual + 1) % imagenesPrecargadas.length;
         muestraImagenDiapositiva();
      }
   });
   efecto.start('opacity',1,0);   
}

Como en casos anteriores, se realiza un sencillo efecto de fundido, para pasar la imagen desde opacidad 1 a 0. Cuando el efecto termina de ser realizado, se vacía la capa que muestra las imágenes y se incrementa en 1 la variable imagenActual, teniendo en cuenta que nunca sea superior al número de imágenes del array de precargadas. Por último se llama a la función muestraImagenDiapositiva(), para comenzar el proceso de nuevo y mostrar la siguiente imagen.

Código completo del slide Mootools

El código de este ejercicio se puede ver todo junto a continuación.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="es">
<head>
<title>Assets percarga de imágenes Mootools y presentación en slide</title>
   <script src="mootools-core-1.3.1.js" type="text/javascript"></script>
   <script src="mootools-more-1.3.1.1.js" type="text/javascript"></script>
   <script type="text/javascript">
   var arrayImagenes = ["assets-imagenes/825.gif", "assets-imagenes/1073.gif","assets-imagenes/765.gif","assets-imagenes/1.gif", "assets-imagenes/489.gif", "assets-imagenes/1602.jpg","assets-imagenes/25.gif", "assets-imagenes/444.gif", "assets-imagenes/1598.gif", "assets-imagenes/1092.gif", "assets-imagenes/1592.gif", "assets-imagenes/167.gif", "assets-imagenes/1582.gif","assets-imagenes/502.gif", "assets-imagenes/749.gif", "assets-imagenes/1226.gif", "assets-imagenes/1579.gif", "assets-imagenes/1601.gif", "assets-imagenes/324.jpg", "assets-imagenes/1159.jpg", "assets-imagenes/1219.jpg"]
   var imagenActual = 0;
   
   var imagenesPrecargadas = Asset.images(arrayImagenes, {
      onComplete: function(){
         var efecto = new Fx.Tween($("muestraimagen"), {
            duration: 3000,
            onComplete: function(){
               $('muestraimagen').empty();
               muestraImagenDiapositiva();
            }
         });
         efecto.start('opacity',1,0);
      }
   });
   
   function muestraImagenDiapositiva(){
      var efecto = new Fx.Tween($("muestraimagen"), {
         duration: 2000,
         onComplete: function(){
            ocultaImagenDiapositiva();
         }
      });
      imagenesPrecargadas[imagenActual].injectInside($("muestraimagen"));
      efecto.start('opacity',0,1);
      
      
   }
   
   function ocultaImagenDiapositiva(){
      var efecto = new Fx.Tween($("muestraimagen"), {
         duration: 1000,
         onComplete: function(){
            $("muestraimagen").empty();
            imagenActual = (imagenActual + 1) % imagenesPrecargadas.length;
            muestraImagenDiapositiva();
         }
      });
      efecto.start('opacity',1,0);   
   }
   
   </script>
   
</head>
<body>
<h1>Precarga de imágenes y slide con mootools</h1>
   <div id="muestraimagen"><img src="assets-imagenes/loading.gif" width=32 height="32" style="margin-left: 30px;"></div>
</body>
</html>

Como podemos ver el ejercicio completo contiene pocas líneas de código, pero el efecto de pase de diapositivas queda bastante atractivo. Finalizamos con un enlace al ejemplo en marcha.