jQuery Timelinr
Dando vida al tiempo / Giving life to time
Selecciona tu idioma / Select your language:
EN
This simple plugin helps you to give more life to the boring timelines. Supports horizontal and vertical layouts, and you can specify parameters for most attributes: speed, transparency, etc..
New version available, 0.9.5
Configuration:
- Include the jQuery library and this 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>
<script type="text/javascript">
$(function(){
$().timelinr();
});
</script>
<script type="text/javascript">
$(function(){
$().timelinr({
orientation: 'horizontal',
// value: horizontal | vertical, default to horizontal
containerDiv: '#timeline',
// value: any HTML tag or #id, default to #timeline
datesDiv: '#dates',
// value: any HTML tag or #id, default to #dates
datesSelectedClass: 'selected',
// value: any class, default to selected
datesSpeed: 'normal',
// value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to normal
issuesDiv : '#issues',
// value: any HTML tag or #id, default to #issues
issuesSelectedClass: 'selected',
// value: any class, default to selected
issuesSpeed: 'fast',
// value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to fast
issuesTransparency: 0.2,
// value: integer between 0 and 1 (recommended), default to 0.2
issuesTransparencySpeed: 500,
// value: integer between 100 and 1000 (recommended), default to 500 (normal)
prevButton: '#prev',
// value: any HTML tag or #id, default to #prev
nextButton: '#next',
// value: any HTML tag or #id, default to #next
arrowKeys: 'false',
// value: true/false, default to false
startAt: 1,
// value: integer, default to 1 (first)
autoPlay: 'false',
// value: true | false, default to false
autoPlayDirection: 'forward',
// value: forward | backward, default to forward
autoPlayPause: 2000
// value: integer (1000 = 1 seg), default to 2000 (2segs)
});
});
</script>
HTML markup must be as follows:
<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> <!-- optional -->
<a href="#" id="prev">-</a> <!-- optional -->
</div>
Icon designed by Sebastián Cortés
Changelog:
- 0.9.5: IE8 bug smashed while dates are animated (vertical); CSS updated: filter added due to IE8 bad-support of PNG transparency (#issues img)
- 0.9.4: Added autoPlay, autoPlayPause and autoPlayDirection (disabled by default).
- 0.9.3: Added startAt: select where do you want the timeline to start.
- 0.9.3: Fixed bug with animation while pressing the navigation buttons.
- 0.9.2: Fixed Firefox bug with event.preventDefault();
- 0.9.1: Added keyboard navigation, see vertical demo.
- 0.9.1: preventDefault(); added to arrows.
- 0.9.1: Documentation improved.
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.
Nueva versión disponible, 0.9.5
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>
<script type="text/javascript">
$(function(){
$().timelinr();
});
</script>
<script type="text/javascript">
$(function(){
$().timelinr({
orientation: 'horizontal',
// valores: horizontal | vertical, por defecto horizontal
containerDiv: '#timeline',
// valores: cualquier etiqueta HTML ó #id, por defecto #timeline
datesDiv: '#dates',
// valores: cualquier etiqueta HTML ó #id, por defecto #dates
datesSelectedClass: 'selected',
// valores: cualquier clase, por defecto selected
datesSpeed: 'normal',
// valores: número entre 100 y 1000 (recomendado) ó 'slow', 'normal', 'fast', por defecto normal
issuesDiv : '#issues',
// valores: cualquier etiqueta HTML ó #id, por defecto #issues
issuesSelectedClass: 'selected',
// valores: cualquier clase, por defecto selected
issuesSpeed: 'fast',
// valores: número entre 100 y 1000 (recomendado)ó 'slow', 'normal', 'fast', por defecto fast
issuesTransparency: 0.2,
// valores: número entre 0 y 1 (recomendado), por defecto 0.2
issuesTransparencySpeed: 500,
// valores: número entre 100 y 1000 (recomendado), por defecto 500 (normal)
prevButton: '#prev',
// valores: cualquier etiqueta HTML ó #id, por defecto #prev
nextButton: '#next',
// valores: cualquier etiqueta HTML ó #id, por defecto #next
arrowKeys: 'false',
// valores: true/false, por defecto false
startAt: 1,
// valor: número entre 1 y el máximo de elementos, por defecto 1 (primero)
autoPlay: 'false',
// valor: true | false, por defecto false
autoPlayDirection: 'forward',
// valor: forward | backward, por defecto forward
autoPlayPause: 2000
// valor: número (1000 = 1 seg), por defecto 2000 (2segs)
})
});
</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>
</li>
<li id="date2">
<p>Lorem ipsum.</p>
</li>
</ul>
<a href="#" id="next">+</a> <!-- opcional -->
<a href="#" id="prev">-</a> <!-- opcional -->
</div>
Ícono diseñado por Sebastián Cortés
Cambios:
- 0.9.5: bug de IE8 aplastado cuando las fechas eran animadas (vertical); CSS mejorado: filter agregado por el mal soporte de IE8 con los PNG transparentes (#issues img)
- 0.9.4: Agregados autoPlay, autoPlayPause y autoPlayDirection (deshabilitados por defecto).
- 0.9.3: Agregado startAt: selecciona en qué punto quieres que comience la línea de tiempo.
- 0.9.3: Solucionado bug con animación mientras presionas los botones de navegación.
- 0.9.2: Solucionado bug Firefox con event.preventDefault();
- 0.9.1: Agregado navegación por teclado, ver ejemplo vertical.
- 0.9.1: preventDefault(); agregado a las flechas.
- 0.9.1: Documentación mejorada.
Download/Bajar Plugin 0.9.5 + Demos
Copyright 2011, CSSLab.cl – Free under the MIT license.
Sobre el Autor: Jorge Epuñan
Soy quien escribe en este sitio: diseñador gráfico de profesión, desarrollador web por preferencia y amante de la interacción humano-computador. Cuando no pienso en web, salgo a trotar por mis barrios en Santiago, Chile o me junto con amigos a un bar a conversar sobre nuevas tendencias y tecnologías. Twitter profesional y personal, además del Contacto.
