Una galería de imágenes con slideshow

Esta es un galería de imágenes, realizada en Javascript que a su vez, funciona como slideshow. Aunque su uso tal vez sea limitado, tiene la ventaja de ser muy pequeña y bastante sencilla.

En el sitio original, podemos ver un demo y descargar el ZIP con el ejemplo completo pero, si vamos a intentar utilizarlo en Blogger habrá que hacerle algunas modificaciones más o menos importantes.

Por lo general, cuando hablamos de scripts siempre decimos que hay que ubicar el código en el head de la página. Eso es así porque el código lo vamos a utilizar repetidamente pero, no es el único método. En este caso, la galería está pensada para usarse en páginas individuales por lo tanto, no vale la pena insertarla en la plantilla ya que no nos interesa que se cargue siempre sino sólo cuando la vayamos a utilizar así que, la llamaremos directamente desde un post, el mismo donde irá la galería.

Vayamos por partes. Creamos un post cualquiera y nos colocamos en el modo Edición HTML. Primero que nada, necesitamos insertar el CSS; esto, en Blogger, lo hacemos importándolo:

<style type="text/css">@import url("URL_GAslideshow.css");</style>

#contenedorGaleria { /* es el bloque de toda la galería */
background-color: #848FAA;
border: 6px solid #444F6A;
margin: 0px auto;
padding: 10px;
width: 494px; /* el ancho es el único valor obligatorio y depende del tamaño de la imagen */
}
#contenedorMiniaturas-outter { /* es el bloque externo con las miniaturas */
background-color: #505961;
border:2px solid  #505961;
height: 100px; /* es igual al alto de la miniaturas */
margin-top: 10px;
padding: 0;
width: 490px; /* el ancho siempre debe ser definido */
}
#contenedorMiniaturas-inner { /* es el bloque interno con las miniaturas */
height: 100px;
overflow: hidden;
position: relative;
width: 490px;
}
#lasMiniaturas { /* son las propiedades de la etiqueta UL */
border-right: 5px solid #FFFFFF;
height: 100px;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
width: 5000px; /* o cualquier valor MUY alto */
}
#lasMiniaturas li { /* las miniaturas están en etiquetas LI */
float: left; 
cursor: pointer;
margin: 0 1px;
padding: 0;
}
#lasImagenes { /* es el bloque que contendrá las imágenes grandes */
background: #FFFFFF url(URL_loading.gif) no-repeat center center;
border: 2px solid #505961;
height: 272px;
padding: 5px;
position: relative;
width: 480px;
}
#lasImagenes img { /* cada imagen */
position: absolute;
top: 5px;
left: 5px
}
/* las propiedades de los enlaces que sirven para navegar entre imágenes */
.galNavegacion{ }
#galAtras { }
#galAtras:hover { }
#galAdelante { }
#galAdelante:hover { }

Ahora, colocaremos el código HTML de la galería y en un post de Blogger lo tendremos que escribir todo en una sola línea:

<div id="contenedorGaleria">
<div id="contenedorImagenes">
<div id="lasImagenes">
<a href="javascript:imgNav(-1)" class="galNavegacion" id="galAtras"></a>
<a href="javascript:imgNav(1)" class="galNavegacion" id="galAdelante"></a>
</div>
</div>
<div id="contenedorMiniaturas-outter">
<div id="contenedorMiniaturas-inner">
<ul id="lasMiniaturas">
<li value="1"><img src="URL_miniatura_1" height="100" width="175" /></li>
<li value="2"><img src="URL_miniatura_2" height="100" width="175" /></li>
<li value="3"><img src="URL_miniatura_3" height="100" width="175" /></li>
<li value="4"><img src="URL_miniatura_4" height="100" width="175" /></li>
<li value="5"><img src="URL_miniatura_5" height="100" width="175" /></li>
</ul>
</div>
</div>
</div>

Sólo colocamos tantos <li value="N"> como imágenes vamos a usar y las direcciones de las miniaturas que se verán en la parte inferior.

Ahora, establecemos los datos del script. En Blogger, también lo escribiremos en una sola línea:

<script type="text/javascript">
// la lista de imágenes
var imagenGaleria = new Array();
imagenGaleria[0] = ""; // dejar en blanco
imagenGaleria[1] = "URL_imagen1.jpg";
imagenGaleria[2] = "URL_imagen2.jpg";
imagenGaleria[3] = "URL_imagen3.jpg";
imagenGaleria[4] = "URL_imagen4.jpg";
imagenGaleria[5] = "URL_imagen5.jpg";

var imgid = 'lasImagenes'; // el ID del bloque donde se mostrarán las imágenes
var thumbid = 'lasMiniaturas'; // el ID del bloque con las miniaturas
var auto = true; // poner en false si no se quiere que el slideshow funcione automáticamente
var autodelay = 5; // cantidad de segundos entre cada imagen
</script>

Por último, cargamos el script y lo ejecutamos:

<script type="text/javascript" src="URL_GAslideshow.js"></script>
<script type="text/javascript">slideShow();</script>

¿Puede haber problemas? Sí, dependerá mucho de la plantilla donde queramos utilizarlo. Si todo es normal, debería funcionar en IE, Firefox, Opera y Safari.