Horinaja: Original slideshow de contenidos

Fácil, original, flexible, así es Horinaja, un script que nos permite crear slideshows que se manejan con la rueda del ratón, desplazando los contenido con una animación horizontal.

Hay dos modelos, uno para quienes tenemos Prototype + Scriptaculous y otro para quienes usan jQuery. En cualquiera de los dos casos, descargamos el archivo RAR, lo descomprimimos y allí nos encontraemos con el archivo class.horinaja.scriptaculous.js o class.horinaja.jquery.js que es el único que necesitamos y lo alojamos en un servidor propio o lo copiamos y pegamos en la plantilla.

Y luego, el CSS:

<style type="text/css">
/* la clase que controla el slider */
.horinaja ul {
list-style-type: none;
margin-left: 0;
position: relative;
}
.horinaja ul li {
background: transparent;
list-style-type: none;
display: block;
top: 0;
}
/* la clase que controla la paginación optativa */
ol.horinaja_pagination {
background: transparent;
clear: both;
height: 40px;
margin: 0 auto;
padding: 5px 0 0 0;
position: relative;
}
ol.horinaja_pagination li{
display: block;
float: left;
height: 40px;
}
ol.horinaja_pagination li a {
background: transparent;
color: white;
display: block;
height: 40px;
float: left;
font-size: 16px !important;
font-weight: bold;
line-height: 40px;
padding: 0;
text-align: center;
width: 40px !important;
}
</style>

Lo usamos incluyendo una lista dentro de un DIV que tenga establecida la clase horinaja:

<div id="nombreID" class="horinaja">
<ul>
<li> ... el contenido 1 ... </li>
<li> ... el contenido 2 ... </li>
...
<li> ... y así sucesivamente ... </li>
</ul>
</div>
<script type="text/javascript">
document.observe("dom:loaded", function() { new Horinaja(nombreID,velocidad,delay,paginacion); });
</script>

donde:

nombreID es el ID del DIV contenedor y debe ser un nombre único
velocidad y delay indican el tiempo de la animación al siguiente slide (en segundos)
paginacion indica si queremos que se muestre una lista numerada de los slides (true) o no (false)

Por ejemplo:

document.observe("dom:loaded", function() { new Horinaja('demohorinaja',0.5,20,false); });

En lo personal, creo que hay que darle altura y el ancho al DIV contenedor y ocultarlo hasta que se cargue así que, por ejemplo, usaría algo así:

<div id="nombreID" class="horinaja" style="display: none; height: 250px; width:480pcx">

De este modo, lo mantendría oculto hasta que se cargue ya que si el contendio es "pesado", el efecto se ve mal hasta que termina de cargarse.

Para hacerlo visible, usaría la misma función, algo así:

document.observe("dom:loaded", function() { new Horinaja('nombreID',1,20,true);
document.getElementById('nombreID').style.display='block';});