Cómo instalar un carrusel de imagenes (Con Scriptaculuos)

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

Este es un carrusel de imágenes de Brian R. Miedlar que muestra las imágenes con un efecto de deslizamiento y regresa al inicio una vez llegado a la última imagen. Está hecho con Scriptaculous así que quienes usen jQuery ya saben que deberán aplicar un hack para que ambos scripts funcionen.

Puedes ver un ejemplo funcionando en este blog de pruebas.

Para poner este carrusel de imágenes en tu blog primero necesitas descargar este archivo, descomprimirlo, y subir los archivos a un hosting.
Luego, entra en la Edición HTML de tu plantilla y agrega antes de </head> esto:

<!-- Prototype y Scriptaculous-->
< script src='http://www.google.com/jsapi'></script>
< script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
< /script>
< !-- Prototype y Scriptaculous-->

< script language='javascript' src='URL del archivo os.js' type='text/javascript'/>
< script language='javascript' src='URL del archivo carousel.js' type='text/javascript'/>
< script language='javascript' src='URL del archivo application.js' type='text/javascript'/>

Si ya tienes Scriptaculous y Prototype no hace falta que agregues el código gris, pero el resto sí. Ahí coloca donde se indica en color rojo las URLs de los archivos que subiste previamente.

Ahora antes de ]]></b:skin> pega los estilos.

.carousel {
position:relative;
clear:both;
left:20px; /* Distancia desde la izquierda */
margin-top:10px;
margin-bottom:20px; /* Margen inferior */
border:2px solid #D8D8D8; /* Borde del carrusel */
background-color:#F2F2F2; /* Color de fondo */
}
.carousel .navButton {cursor:pointer; display:block; text-indent:-9999px; background-repeat:none; z-index:10;}
.carousel .container { position:absolute; overflow:hidden; }
.carousel .items { position:absolute; }

#Carousel2 {
height:88px; /* Alto del contenedor */
width:685px; /* Ancho del contenedor */
}
#Carousel2 .container {
left:26px;
top:12px;
width:630px; /* Ancho del contenedor de las imágenes */
height:100px; /* Alto del contenedor de las imágenes */
}
#Carousel2 .items { top:0; left:2px;
width:1700px; /* Ancho total de todas las minaturas */
}
#Carousel2 .item { height:70px; width:70px; float:left; clear:right; }
#Carousel2 .item .icon img { position:relative; left:0px; width:65px !important; height:65px; cursor:pointer;}
#Carousel2 .navButton { position:absolute; bottom:0px; width:24px; height:87px; }
#Carousel2 .navButton.previous { left:0px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZNb48FqY0hjO_u6yyQMxvbhBteiJ6Q0qfrzVDiVopSGR_C7sSp0DgAsMvJpdY4HJFj3cIfyC4hGnP-oJChudoihQADZsy6NHzxS1dVU94fCwpNRueBzwjwxK9JeqXaaQjGs4eqBnv5Ms/s87/button-left.png); }
#Carousel2 .navButton.next { right:2px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg401CFNHFforLginO_sG4A7QSq7MFggnHNz9TzWEiSpYCyxGFd4c4RgRSfsD4ZcUC0VlUS_WWRoUpHTHy9H-5xM4Lnl9pJuQSgm6cOfsgTkmxZqfJq5DrVMdaIr3NTSyk92kzfLd5UTnY/s87/button-right.png); }
#Carousel2 .item .key { display:none;}
#Carousel2 .item .picture { display:none;}

Después entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript, o si usas la nueva interfaz entra en Diseño | Añadir un gadget | HTML/Javascript, y ahí pega la estructura del carrusel:

<div id="Carousel2" class="carousel">
< div class="button navButton previous" style="display:none;">Atrás</div>
< div class="button navButton next" style="display:none;">Adelante</div>
< div class="container">
< div class="items">


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>



</div>
</div>
</div>

Ahí agrega las URLs de los enlaces y las URLs de las imágenes. La URL del enlace es opcional por si deseas que la imagen enlace a alguna entrada.

En el segundo código he puesto en color verde algunos estilos que puedes personalizar tales como el color del borde y el color de fondo. Las flechas son imágenes así que si quieres cambiarles su color o usar otras, tendrás que cambiar las dos URLs que se encuentran en ese código.

El tamaño.

El ancho del carrusel yo lo he puesto de 685px, así que debajo de la cabecera podría quedar muy bien. Si quieres cambiar la longitud entonces tendrás que cambiar el /* Ancho del contenedor */ (que es el tamaño de todo el carrusel), el /* Ancho del contenedor de las imágenes */ (que es el área donde se muestran las miniaturas), y el /* Ancho total de las miniaturas */ que es el ancho real que ocupan todas las miniaturas juntas.

Si agregas más imágenes o si quitas algunas, también tendrás que modificar el ancho total de las miniaturas, de lo contrario se mostrarán algunas imágenes debajo de otras.

Para añadir más imágenes agrega antes de los </div> en color azul un pedazo de código como este:

<div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>

Para alinear el gadget sólo cambia la distancia desde la izquierda (en color verde) por otro valor, uno más grande hará que se recorra hacia la derecha.

El carrusel muestra grupos de 5 imágenes en cada avance o retroceso, si deseas modificar este valor deberás editar el archivo application.js y ahí dentro buscar esta parte:

setSize: 5,

Ese 5 es el número de imágenes que se muestran en cada avance, sólo cámbialo por el que quieras.

A modo de consejo: como los scripts son tres pueden ser lentos en cargar así que se recomienda alojar los scripts en la plantilla.

Y ahora sí, es todo.