Smooth Gallery 1.0 es un sistema de galería de imágenes desarrollado con mootools v1.0 la cual nos permite navegar por las imágenes de la galería, ver una muestra pequeña de la imagen que deseamos ver completa, muestra una pequeña descripción de la imagen actual, determinar el tiempo que se mostrará una imagen, y entre otras opciones que podemos configurar.

Como usarlo

Bien, no quiero reeemplazar las instrucciones de uso del autor (que están en inglés), así que iré al grano especificando los pasos necesarios para configurar y usar Smooth Gallery en nuestros proyectos web.

Descargamos los archivos necesarios de la página del autor. Podemos elegir entre formatos .zip o tar.gz. Para nuestro ejemplo usaremos el .zip. (Aunque finalmente es lo mismo).

Descomprimimos el archivo y tendremos una estructura similar a la imagén abajo. Aunque existe un archivo demo.html, vamos a crear nuestro propio ejemplo-demo. Así que abrimos nuestro editor de páginas web preferido, y creamos nuestra página y la guardamos con el nombre test.html y lo ubicamos en el mismo directorio que descomprimimos.

Smooth Instalar

Ahora entre las etiquetas <head></head>, incluimos los archivos de JavaScript y CSS que usaremos:

<head>
 <title>Usando SmoothGallery</title>
 <script src="scripts/mootools.js" type="text/javascript"></script>
 <script src="scripts/jd.gallery.js" type="text/javascript"></script>
 <link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" />
</head>

Ahora prepararemos la estructura a través de capas. Nos ubicamos entre las etiquetas <body></body> y escribimos lo siguiente:

<div id="myGallery">
 <div class="imageElement">
  <h3>Imagen 1</h3>
  <p>Una descripcion de la imagen 1.</p>
  <a href="imagen1.html" title="open image" class="open"></a>
  <img src="images/brugges2006/1.jpg" class="full" />
  <img src="images/brugges2006/1-mini.jpg" class="thumbnail" />
 </div>
 <div class="imageElement">
  <h3>Imagen 2</h3>
  <p>Una descripcion de la imagen 2.</p>
  <a href="imagen2.html" title="open image" class="open"></a>
  <img src="images/brugges2006/2.jpg" class="full" />
  <img src="images/brugges2006/2-mini.jpg" class="thumbnail" />
 </div>
</div>

Vamos a explicar el código. La capa principal de todas las imágenes es "myGallery" y esta asociada a un estilo. Bien hasta allí no hay problema. Ahora le sigue una capa "imageElement" que específica un elemento dentro de la galería. En este caso vemos 2 de estos elementos. Dentro de cada capa podemos apreciar características de la imagén como:

  • El título (que va en las etiquetas h3),
  • Una pequeña descripción (dentro de las etiquetas de <p>) ,
  • Un enlace a una página html que mostrará la imagén completa,
  • Imagén en tamaño completo y, finalmente,
  • La imagén en formato pequeño.

Como mencionamos en el segundo punto, cada capa "imageElement" tiene un enlace a una página, en este caso a imagen1.html e imagen2.html. Así que crearemos estas 2 páginas, cada una con la imagén que será mostrada en la galería.

Llamamos a este archivo imagen1.html, podemos seguir la misma estructura para el archivo imagen2.html, simplemente cambiamos el título, la cabecera h3 y la nombre de archivo de la imagen.

<html>
<head>
<title>Imagen 1</title>
</head>
<body>
<h1>Viendo la Imagen 1</h1>
<img src="images/brugges2006/1.jpg" width="460" height="345" />
</body>
</html>

Ahora elegiremos que tipo de galería usaremos. El autor muestra 4 formas, así que en este ejemplo solo usaremos una: la galería por defecto; con sus flechas de desplazamiento, titulo y descripción al pie de la imagen y con un pequeño explorador de imagenes en la parte superior de la imagen. Este código lo escribimos después de la etiqueta de cierre </div> de la capa <div id="myGallery">.

 <script type="text/javascript">
 function startGallery() {
 var myGallery = new gallery($('myGallery'), {
 timed: false
 });
 }
 window.onDomReady(startGallery);
 </script>

Eso es todo! Ya tenemos nuestra galería de dos imágenes, podemos desplazarnos por la imagenes, ver su titulo y descripción, además de unas muestras en miniatura en la parte superior.

Si conoce algo de PHP puede crear la estructura dentro de las etiquetas <div id="myGallery"></div> de manera dinámica, quizás mediante un bucle. Bueno ya es imaginación de cada uno como usarlo de la mejor manera. Puede ver nuestro ejemplo y descargarlo.