Dando vida al tiempo / Giving life to time

ES

Este sencillo plugin ayuda a que le des más vida y estilo a las aburridas líneas de tiempo. Soporta diagramaciones horizontales y verticales, y puedes parametrizar la mayoría de los atributos: velocidades, transparencias, etc.

Última versión estable: 0.9.6

Configuración:

Incluye la librería jQuery y luego este plugin:

<script src="js/jquery-1.x.x.min.js"></script> <script src="js/jquery.timelinr-0.9.x.js"></script>

Inicialízalo con los parámetros por defecto:

$(function(){

$().timelinr();

});

O customízalos:

$(function(){

$().timelinr({

orientation: 'horizontal', containerDiv: '#timeline', datesDiv: '#dates', datesSelectedClass: 'selected', datesSpeed: 'normal', issuesDiv : '#issues', issuesSelectedClass: 'selected', issuesSpeed: 'fast', issuesTransparency: 0.2, issuesTransparencySpeed: 500, prevButton: '#prev', nextButton: '#next', arrowKeys: 'false', startAt: 1, autoPlay: 'false', autoPlayDirection: 'forward', autoPlayPause: 2000 }) });

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> </li> <li id="date2"> <p>Lorem ipsum.</p> </li> </ul> <a href="#" id="next">+</a> <a href="#" id="prev">-</a> </div>

Ícono diseñado por Sebastián Cortés

Cambios: