Rotando imágenes con Scriptaculous

Siguiendo con la serie de entradas sobre como usar la librería de script Scriptaculous para añadir distintos efectos en nuestro blog, vamos a ver en esta ocasión como construir un slide de imágenes o banners que podremos colocar en un gadget e incluso en una entrada.


[1] Para empezar tenemos que incluir el código necesario para el uso de cualquier efecto con Scriptaculous (como ya vimos en la primera entrada sobre Scriptaculous, este código solo es necesario incluirlo una vez en la plantilla) así que, si ya lo tenemos incluido nos saltamos este paso.

Si es la primera vez que vamos a usar un efecto mediante Scriptaculous, añadimos este código antes de la etiqueta </head> de nuestra plantilla (Edición HTML):

<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>

[2] Añadimos a continuación el código html para construir el slide y el script para conseguir el efecto, que incluiremos como ya dije antes, en un gadget html o en una entrada.

<div style="height: 200px; text-align: center; width: 100%;">
<div class="slide" id="slideshow1">
<div>
<img src="URL_DE_LA_IMAGEN" /></div>
</div>
<div class="slide" id="slideshow2" style="display: none;">
<div>
<img src="URL_DE_LA_IMAGEN" /></div>
</div>
<div class="slide" id="slideshow3" style="display: none;">
<div>
<img src="URL_DE_LA_IMAGEN" /></div>
</div>

</div>

<script type="text/javascript">

start_slideshow(1, 3, 2000);

function start_slideshow(start_frame, end_frame, delay) {
setTimeout(switch_slides(start_frame,start_frame,end_frame, delay), delay);
}

function switch_slides(frame, start_frame, end_frame, delay) {
return (function() {
Effect.Fade('slideshow' + frame);
if (frame == end_frame) { frame = start_frame; } else { frame = frame + 1; }
setTimeout("Effect.Appear('slideshow" + frame + "');", 850);
setTimeout(switch_slides(frame, start_frame, end_frame, delay), delay + 850);
})
}
</script>

Notas y modificaciones:

Lo más apropiado para la correcta visualización del slide, es usar imágenes con la misma medida.

La primera línea del código es la que controla el <div> donde van incluidas las imágenes, y es ahí donde podemos controlar una serie de parámetros:

height: 200px; La altura del div. Sería apropiado colocar un poco más de lo que midan de alto las imágenes.

text-align: center; El contenedor de las imágenes estará centrado respecto al lugar donde se coloca, por tanto las imágenes del slide también.

width: 100%; Es el ancho del <div> que contiene el slide. En este caso he puesto 100% para que se adapte al espacio total de donde ha sido colocado. Puede variarse el porcentaje o colocar en pixeles un poco más de la medida de las imágenes.

En el ejemplo he usado 3 imágenes, pero podemos añadir más siempre antes del último </div> del código, repitiendo para cada una estas líneas de código:

<div class="slide" id="slideshow4" style="display: none;">
<div>
<img src="URL_DE_LA_IMAGEN" /></div>
</div>

Cada vez que añadamos una nueva imagen, tenemos que cambiar la id del código que la muestra, es decir, en el ejemplo la última imagen tiene como id "slideshow3", así que la nueva que añadamos a continuación tendrá que llamarse "slideshow4".
En el script que va debajo del código html, cambiaremos el 3 por el número de imágenes totales que mostraremos en el slide, lo haremos en esta línea:
start_slideshow(1, 3, 2000);

En el código no he añadido enlaces a las imágenes, pero pueden añadirse de la misma forma que hacemos habitualmente:

<a href="Url_del_enlace"><img src="Url_de_la_imagen"/></a>

Ejemplo:

¡Gracias por la paciencia Unperro!

Consejo:

Para aquellos que usáis JQuery en lugar de la librería Scriptaculous, en el blog BanakaBanaka encontraréis como hacer algo parecido en la entrada Imágenes rotantes con JQuery.