Slide de imágenes con fade en el header

Hace ya tiempo, Ivanna me preguntaba por un efecto que había visto en un blog y que mostraba el header como una sucesión de imágenes con cierto efecto de fade. Ahora, llegó el momento de la explicación.

Se trata de un script simple llamado Image Cross Fader Redux que tiene dos versiones, la más antigua es la que se veía en el ejemplo y una más actualizada y flexible a la que basta modificarla un poco para que funcione en Blogger sin necesidad de alojar archivos.

Necesitamos entonces el script que puede descargarse desde el sitio del desarrollador o usar el de este ZIP que ya ha sido modificado.

Como cualquier otro, lo colocamos antes de </head>:

<script type='text/javascript'>
//<![CDATA[
  ... y aquí pegamos el contenido del archivo ...
//]]>
</script>

Necesitos agregar un poco de estilo así que a continuación, ponemos esto:

<style>
#imageContainer {
  margin: auto;
  position: relative;
}
#imageContainer {
  height: VALORpx;
  width: VALORpx;
}
#imageContainer img {
  left:0;
  position: absolute;
  top:0; 
}
</style>

Allí, sólo cambiaremos VALOR por el ancho y alto de las imágenes que, por lógica, deben ser todas del mismo tamaño.

Por último, el HTML que agregaremos donde nos guste:

<div id="imageContainer">
  <img src="URL_imagen_1" />
  <img src="URL_imagen_2" />
  <img src="URL_imagen_3" />
</div>

Como se ve, sólo es un DIV con un ID específico dentro del cual se colocan las etiquetas IMG de todas las imágenes que querramos mostrar.

Para aplicarlo en el header de Blogger, el proceso es el mismo, agregamos el script, el CSS y luego, sin expandir la plantilla, buscamos el header por defecto que, podemos eliminar o simplemente, ocultar para que no se muestre y de ese modo, si quisiéramos restaurarlo, bastaría hacer el proceso inverso. Eso, podemos hacerlo agregando lo siguiente en el CSS:

#header-wrapper { display: none; }

Y el código HTML lo ponemos arriba de ese DIV del header:

<div id="imageContainer">
  <img src="URL_imagen_1" />
  .......
  <img src="URL_imagen_N" />
</div>

<div id='header-wrapper'>

En este ejemplo de un blog de pruebas puede verse el efecto funcuncionado; sólo deben tener en cuenata que comenzará a reproducirse al haberse cargado todas las imágenes y por lo tanto, si son demsiadas, habrá una demora importante.