Se puede desplazar una o varias imágenes, haciéndolas rotar, en un gadget HTML/Javascript o dentro de una entrada con las librerías JavaScript con script.aculo.us o prototype
1. Una de las librerias de Javascript más conocidas son Prototipe y Scriptculous, para causar ciertos efectos.
No es necesario una llamada al servidor con el enlace correspondiente en la plantilla. JavaScript se carga una vez en la plantilla antes de </head> lo que muestra el código API de Google:
<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.6.1.0");
google.load("scriptaculous", "1.8.3");
</script>
<!-- Prototype y Scriptaculous-->
(Si ya lo tenemos incluido nos saltamos este paso)
2. Añadimos a continuación el código HTML para construir el slide y el script para conseguir el efecto, que incluiremos, en un gadget HTML/Javascript o dentro de una entrada (Edición de HTML).
<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>
• Nota:
- Se aconseja usar imágenes de igual medida, ancho-alto, para un resultado final óptimo
- 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 el 100% se adapta al espacio total donde ha sido colocado. Puede variarse el porcentaje o colocar en pixeles un poco más de la medida de las imágenes.
El ejemplo muestra tres imágenes pero se pueden añadir más siempre antes del último </div> repitiendo para cada imagen las líneas de código:
<div class="slide" id="slideshow4" style="display: none;">
<div>
<img src="URL_DE_LA_IMAGEN" /></div>
</div>
Al añadir una nueva imagen hay que cambiar siempre la id , es decir, en el ejemplo la última imagen tiene como id "slideshow3"; la nueva se llamará "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; se hace en la línea:
start_slideshow(1, 3, 2000);
- Para añadir enlaces a las imágenes se usa el código:
<a href="Url_del_enlace"><img src="Url_de_la_imagen"/></a>
