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>

Donec a arcu sit amet velit pharetra tincidunt. Aliquam erat volutpat. Praesent ac consectetur felis. Sed vitae augue eget dolor tristique blandit. Ut porttitor ultrices erat. Curabitur ac lectus sed ipsum venenatis scelerisque vitae adipiscing odio. Proin eget lacus lorem, eu euismod enim. In sodales, augue sit amet pretium volutpat, magna lacus viverra magna, vestibulum lacinia leo erat vel tellus. Suspendisse sed ante quis nibh aliquam commodo! Phasellus nisl tortor, posuere a scelerisque in, iaculis id ipsum. Vivamus in bibendum magna! Etiam congue elementum turpis et aliquet. Suspendisse elit nunc; tristique eget pretium ullamcorper, sodales in libero. Sed nibh est, cursus non ultrices non, volutpat vitae metus. Sed rutrum lectus at lacus ultricies et gravida massa suscipit volutpat.
Pellentesque pharetra; neque quis adipiscing porta, nisl nibh fermentum justo, eget dignissim libero tortor sit amet ligula. Nulla facilisi. Morbi magna dolor, ornare vitae lobortis in, tincidunt quis nisi. Vivamus et urna felis. Donec tristique felis a urna bibendum vitae dictum mauris mollis. Praesent non metus lectus, ornare varius nibh. Nullam nisi quam, commodo sed tincidunt et, vulputate non diam. Cras leo sem, tempor varius semper ullamcorper, porttitor sed turpis. Praesent eget sapien a dui feugiat elementum. Quisque facilisis auctor dui eget faucibus. Pellentesque auctor tristique ultricies. Pellentesque eu viverra ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam magna neque, malesuada eget ullamcorper vel, aliquam ac nullam.
Aenean porta commodo diam, vitae vestibulum urna ultrices a. Etiam posuere posuere nibh; sed adipiscing lorem lacinia vel. Maecenas scelerisque tellus at nisi volutpat in consectetur nisl auctor. In hac habitasse platea dictumst. Nunc scelerisque purus sed erat sagittis tempor? Integer iaculis rhoncus sagittis. Curabitur enim quam, aliquet vel hendrerit ac, accumsan sed eros. Vivamus tristique arcu sed ligula luctus volutpat. Nunc non nisi eu ligula rutrum scelerisque. Vestibulum tellus risus, pellentesque vitae dictum et, adipiscing ut neque. Sed ultricies, nisl a tristique porta, leo neque semper lorem; non interdum metus ipsum at nulla. Mauris suscipit fermentum velit at ultrices.
Proin at nulla nisl, ut porttitor purus. Duis sit amet enim iaculis mi lobortis tempor. Nunc quis arcu arcu; id porta erat. Sed sed libero ut dolor euismod bibendum. Nam sapien ante, pellentesque a malesuada fermentum, varius eget urna. In at felis velit, quis varius lacus? Ut placerat orci pretium elit vestibulum egestas. Sed in facilisis mi. Cras rhoncus elementum purus, id commodo leo laoreet quis. Cras malesuada mattis placerat! Etiam ut enim ut leo ultricies mattis non et tellus. Nullam vel sollicitudin mauris. Integer ante velit, rhoncus a fermentum eget; varius at erat. Nunc suscipit egestas posuere. Ut ut eleifend turpis. Sed pharetra nisl id ipsum tempor facilisis. Nunc eget nibh in augue porta aliquam. Nulla molestie sodales elit lacinia pulvinar. Duis eget lectus dui, a nullam.

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';});

ElHackerZ