jQuery Timelinr – Urielmania

En algun momento me imagine un diseño con un scroll horizontal, bueno pues ahora visitando CSSLabs encuentro un plugin que parece ser puede funcional para esto, se trata de jQuery Timelinr si bien esta hecho para ayudar a dar más vida y estilo a las aburridas líneas de tiempo, con un poco de imaginacion puede llegar a mas, lo bonito de este plugin ademas de estar en jquery es que soporta diagramaciones horizontales y verticales, y puedes parametrizar la mayoría de los atributos: velocidades, transparencias, etc.

La utilizacion es bastante simple como todos los plugins:

Configuración:

Incluye la librería jQuery y luego este plugin:

<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="js/jquery.timelinr-0.9.js" type="text/javascript"></script>

Inicialízalo con los parámetros por defecto:

<script type="text/javascript"> 
   $(function(){
      $().timelinr();
   });
</script>

El marcado HTML debe ser de la siguiente forma:

<div id="timeline">
   <ul id="dates">
      <li><a href="#">date1</a></li>
      <li><a href="#">date2</a></li>
   </ul>
   <ul id="issues">
      <li id="date1">
         <p>Lorem ipsum.</p>r
      </li>
      <li id="date2">
         <p>Lorem ipsum.</p>
      </li>
   </ul>
<a href="#" id="next">+</a> <!-- opcional -->
<a href="#" id="prev">-</a> <!-- opcional -->
</div>