Una galería de imagenes simplísima

Hace unos días, Darwin me preguntaba cómo hacer una galería de imágenes similar a la utilizada en este post.

No es la primera vez que me lo preguntan y siempre demoré la explicación porque no me parecía demasiado interesante. Es un pequeño script que armé con pedazos de otros ejemplos y que utilizo porque me resulta más cómodo que otros más sofisticados.

Primero que nada, necesitamos el script. Este, lo podemos añadir a la plantilla antes de </head> o crear un archivo externo y alojarlo en algún servidor. En el primer caso, escribimos:

<script language='JavaScript'>
//<![CDATA[
var visorIMGnum=0;
var visorPIC=new Array();

function visorAtras(cual,mtxpics) {
visorPIC = mtxpics
if(visorIMGnum==0) {
visorIMGnum=visorPIC.length-1;
} else {
visorIMGnum --
}
document.getElementById(cual).src=visorPIC[visorIMGnum].src;
}

function visorAdelante(cual,mtxpics) {
visorPIC = mtxpics
if(visorIMGnum==visorPIC.length-1) {
visorIMGnum=0;
} else {
visorIMGnum ++;
}
document.getElementById(cual).src=visorPIC[visorIMGnum].src;
}
//]]>
</script>

En el segundo caso, abrimos el block de notas, copiamos y pegamos el código (todo lo anterior menos las etiquetas <script language='JavaScript'> </script>) y lo guardamos con cualquier nombre y extensión .JS. Luego, lo alojamos en un servidor como Google Pages.

Para utilizar el script, lo cargamos en la plantilla para tenerlo siempre a mano, en un elemento HTML de la sidebar o, como en mi caso, en el post donde lo vamos a utilizar. en todos los casos, escribimos:

<script src="URL_nombre.js"></script>

Donde reemplazamos URL_nombre.js por la dirección URL del archivo.

Ahora, lo que debemos hacer es especificar cuáles son las imágenes a utilizar y precargarlas para que el efecto sea lo suficientemente rápido. Esto, lo hacemos dándoles un nombre cualquiera y estableciendo sus dimensiones. Por ejemplo, supongamos que utilizamos tres imágenes de 200x100:

<script>
var nombrePIC=new Array();
nombrePIC[0]=new Image(200,100); nombrePIC[0].src="URL_imagen1";
nombrePIC[1]=new Image(200,100); nombrePIC[1].src="URL_imagen2";
nombrePIC[2]=new Image(200,100); nombrePIC[2].src="URL_imagen3";
</script>

Por último, el HTML y aquí es donde entra la imaginación de cada uno. Voy a poner todo en una tabla a manera de ejemplo pero las alternativas son muchas:

<table>
<tr>
<td> <!-- primera celda -->
<a onclick="visorAtras('nombreIMG',nombrePIC);return false;" href="javascript:void(0);">
... ENLACE RETROCEDER ...
</a>
</td>
<td> <!-- segunda celda -->
<img src="URL_imagen1" id="nombreIMG" />
</td>
<td> <!-- tercera celda -->
<a onclick="visorAdelante('nombreIMG',nombrePIC);return false;" href="javascript:void(0);">
... ENLACE AVANZAR ...
</a>
</td>
</tr>
</table>

Donde en la primera celda ponemos un enlace que puede ser un texto o una imagen y que ejecuta el script para retroceder en la lista de imágenes.

La segunda celda contiene la primera imagen, la que aparecerá por defecto y tiene un atributo ID con el que identicaremos el bloque.

Y en la tercera celda ponemos el enlace que ejecuta el script para avanzar en la lista de imágenes.

Si se usa una tabla, el esquema es muy variado.