Otro slideshow de imágenes con Scriptaculous

glider.js es un script que utiliza Prototype y Scriptaculous para crear un carrusel deslizante; pestañas donde se coloca cierto contenido y pueden ser accedidas de manera individual, desplazándose de una a otra con un efecto o generar alguna clase de slideshow.

Lo interesante del script es que es muy pequeño y puede ser utilizado múltiples veces en una misma página.

Para esta primera entrada, lo que he hecho es modificarlo bastante y adaptarlo de tal modo de crear un slideshow de imágenes similar al mostrado hace unos días pero con el agregado de algunos controles extras que nos permiten navegar entre las imágenes.

El proyecto original puede ser descargado desde la página del autor.

Si no tenemos las librerías debemos agregarlas antes de </head>:

<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js' type='text/javascript'></script>
<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js' type='text/javascript'></script>

Luego, el script en si mismo que cargamos desde un archivo externo:

<script src='URL_scriptaculous_glider.js' type='text/javascript'></script>

o lo agregamos directamente a la plantilla:

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

Por último, el CSS que es elemental así que podemos diseñarlo con bastante flexibilidad:

<style type='text/css'>
/* el contenedor superior donde se mostrarán los enlaces a cada imagen (IMG1 | IMG2 | etc */
div.gcontroles {
text-align: center;
}
div.gcontroles a { /* ... cualquier propiedad, color, fuente, etc ... */ }
div.gcontroles a:hover { /* ... si queremos un efecto sobre esos enlaces ... */ }

/* el contendedor donde se mostrarán las imágenes y que es una lista UL LI */
div.glider { /* lo dimensionamos a la medida de las imágenes */
height: 300px;
overflow: hidden;
width: 400px;
}
ul.listaglider { /* le vamos a dar un ancho con un valor extremadamente alto para que entren todas */
list-style-type: none;
margin: 0;
padding: 0;
width: 100000px;
}
li.gimg { /* dimensionamos cada item a la medida de las imágenes */
float: left;
height: 300px;
list-style-type: none;
margin: 0;
overflow: hidden;
padding: 0;
width: 400px;
}
li.gimg img { /* por als dudas, fuerzo a que las imágenes se redimensiones siempre */
height: 300px;
width: 400px;
}

/* el contendor con la navegación inferior que pueden ser textos o imagenes*/
div.gflechas { /* lo dimensiono */
height: 45px;
margin: 0 auto;
width: 400px;
}
div.gflechas a { /* ... cualquier propiedad, color, fuente, etc ... */ }
div.gflechas a:hover { /* ... si queremos un efecto sobre esos enlaces ... */ }
</style>

El HTML tiene varias partes; la primera contiene los controles superiores que son anchors a los IDs de las imágenes; la segunda es una lista donde cada etiqueta LI tiene un ID diferente; la tercera son los enlaces para navegar hacia atras y hacia adelante y por último el llamado a la función:

<div id="glider_DEMO">
<div class="gcontroles">
<a href="#gimg1">IMG 1</a> | <a href="#gimg2">IMG 2</a> | <a href="#gimg3">IMG 3</a></a>
</div>
<div class="glider">
<ul class="listaglider">
<li class="gimg" id="gimg1"><img src="URL_imagen_1" /></li>
<li class="gimg" id="gimg2"><img src="URL_imagen_2" /></li>
<li class="gimg" id="gimg3"><img src="URL_imagen_3" /></li>
.......
</ul>
</div>
</div>
<div class="gflechas">
<a href=#" onclick="miejemplo.previous();return false;"></a>
<a href=#" onclick="miejemplo.next();return false"></a>
</div>
<script type="text/javascript">
var miejemplo = new Glider('glider_DEMO', {duration:0.5});
</script>

Decía que podían crearse múltiples instancias así que podríamos tener varios funcionando en la misma página. Para eso, simplemente debemos usar IDs diferentes y crear funciones diferentes:

<div id="otro_DEMO">
.......
</div>
.......
<script type="text/javascript">
var otroejemplo = new Glider('otro_DEMO', {duration:0.5});
</script>

Hay otra variantes, podemos generar un slideshow automático, estableciendo la velocida de este modo:

<script type="text/javascript">
var ejemploauto = new Glider('nombre_ID', {autoGlide: true, frequency: 4});
</script>