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.
Last stable version: 0.9.6
Configuration:
- Include the jQuery library and this plugin:
<script src="js/jquery-1.x.x.min.js"></script>
<script src="js/jquery.timelinr-0.9.x.js"></script>$(function(){
$().timelinr();
});$(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)< });
});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.6: check if required elements exist on page before initializing timelinr
- 0.9.54: Bugfix: large timelines now gets centered.
- 0.9.53: Bugfix: arrows hidden when jumping from first and last dates resolved.
- 0.9.52: Problem with arrows nav and 2 or less issues now fixed.
- 0.9.51: As requested, now prev/next buttons are hidden if the issue is in the first/last position. Also, jQuery updated to 1.7.2 version (latest) and HTML markup now is HTML5 doctype.
- 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.
Ú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>$(function(){
$().timelinr();
});$(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)
})
});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.6: verifica si elemento existe antes de inicializar timelinr
- 0.9.54: Ahora se centran lineas de tiempo con muchas fechas
- 0.9.53: Problema con salto entre primer y última fecha y desaparición de flechas de navegación solucionado.
- 0.9.52: Problema con la navegación con flechas y 2 ó menos issues ahora solucionado.
- 0.9.51: como solicitado, los botones prev/next se esconden si el issue está en la posición inicial/final. Además, jQuery fue actualizado a 1.7.2 (última) y el doctype del documento ahora es HTML5.
- 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.
Copyright 2012, CSSLab.cl – Free under the MIT license.
Comentarios
[…] jQuery Timelinr […]
Hi,
Thanks for creating such a great stuff.
I am not much techie, i want to use horizontal and vertical timelines. In this case both are not working in autoplay mode, have made separate JS from original and have changed ids also but autoplay function is not working for both.
Thanks
Hiren
Do you have a link to look what’s the problem?
Hi CSSLab
I LOVE your JQUERY TIMELINR!!! But i am not technical. Can you help me to add the timeline to my WordPress website?
Kind Regards
Mark
hey Mark, I remember someone wrote a WP plugin above this jQuery plugin, I never used and I don’t know if it is still available. But you can try it yourself. My recommendation is to integrate it handcoded as I show in this same post.
How can I link to a particular time on the timeline with a link from an external HTML page?
Matt: that’s not a built-in feature. You’ll have to code that yourself. Maybe listening to certain hash/uri parameter and setting
startAt:to that value.Hola, me encanta este timeliner, excelente diseño.
Una sugerencia, sería genial que incluyeran un vídeo tutorial de cómo instalarlo.
[…] jQuery Timelinr is a simple plugin that enables you to add a timeline to your Presentation. It supports both horizontal and vertical layouts, and you can specify parameters for numerous attributes such as speed, transparency and auto-play. You can also easily customize the style with CSS. […]
[…] jQuery Timelinr is a simple plugin that enables you to add a timeline to your Presentation. It supports both horizontal and vertical layouts, and you can specify parameters for numerous attributes such as speed, transparency and auto-play. You can also easily customize the style with CSS. […]
how to initialize two object like a time line on the same page?
[…] Download View Demo […]
[…] jQuery TimeLinr: http://www.csslab.cl/2011/08/18/jquery-timelinr/ […]
[…] jQuery Timelinr依赖于jQuery，所以在html中要先载入jQuery库和jQuery Timelinr插件。 […]
Its a nice plugin i have seen for timeline. But I am facing issues while rendering dynamic date. it is having browser issue and selection of no of #dates and #issues or you can say it not working for dynamic data(new records are there in html but not visible in browser. it is sliding for static content beyond it will stop.). Please help me on this issue.
Typo problem…………..1)browser issue in rendering no of records(dynamic) 2) beyond static records, Slider is not working for both #dates and #issues dynamic records.
Hello,
I was wondering if its possible to have a vertical scrollbar inside the content of a horizontal timelinr
I added it into my css, but after I refresh, the scrollbar disapears. Likely the JS is compensating it and descarting it
Hey Feijo, I haven’t figured out why inspecting your URL, I see you define a overflow-y: scroll;. Anyways, try to add another wrapper inside <li></li> and add scroll to that one, not the <li> itself.
I have a really long horizontal timeline, I tried adding a wrapper inside the li like you suggested but it messed up the rest of the css. Is there any way to scroll verticaly, or just get to the end or middle somehow?
Thank you in advance
Elen: if you can share an URL maybe I can help you. You shouldn’t have problem, maybe it’s just CSS.
Hello how can i embedd this plug in into my wesbite in a seperate div?
[…] jquery.timelinr-0.9.54.js […]
I want to control auto-play How to do it？？？
[…] Timelinr – MÁS INFORMACIÓN / […]
Hermano, esto necesita un responsive urgente
[…] 项目地址：http://www.csslab.cl/2011/08/18/jquery-timelinr/ […]
[…] DEMODOWNLOAD […]
Hi, Your timeline looks awesome, thats why I have installed the module your timelinr. But I can’t see it in my contentype, why?
[…] jQuery Timelinr […]
[…] jQuery TimeLinr: http://www.csslab.cl/2011/08/18/jquery-timelinr/ […]
[…] jquery-timelinr […]
[…] Learn Extra Demo […]
Thanks..
[…] jQuery Timelinr […]
[…] jQuery TimeLinr: http://www.csslab.cl/2011/08/18/jquery-timelinr/ […]
[…] jQuery Timelinr依赖于jQuery，所以在html中要先载入jQuery库和jQuery Timelinr插件。 […]
[…] DEMO DOWNLOAD How to Use? […]
[…] jQuery TimeLinr: http://www.csslab.cl/2011/08/18/jquery-timelinr/ […]
[…] jquery.timelinr-0.9.54.js […]
[…] jQuery Masonry v2.1.08 – A dynamic layout plugin for jQuery jquery.slitslider.js v1.1.0 jQuery Timelinr 0.9.52 jQuery Easing v1.3 jQuery is a fast and concise JavaScript Library that simplifies HTML document […]
Hola buen dia, como puedo instalar 2 en una misma pagina
Hernán: hay un branch “multiple-timelines” en el repositorio de GitHub que estaba trabajando en ello, según veo funciona bien. No hice tests extensivos. Puedes probar con ese, dando clases a los timelines en vez de id.
Avísame como te va porfavor.
[…] jquery.timelinr-0.9.54.js […]
[…] jQuery Timelinr […]
[…] jQuery的Timelinr […]
[…] jQuery Timelinr […]
[…] jQuery TimeLinr: http://www.csslab.cl/2011/08/18/jquery-timelinr/ […]
Dear Sir
I have Used Your Jquery-Timelinr In My Website
Please Tell Me How To Its Responsive??
Pintoo: it is not responsive out-of-the-box. You’ll have to handle it by yourself, maybe re-initializing it on
$(window).resize();[…] jQuery Masonry v2.1.08 – A dynamic layout plugin for jQuery jquery.slitslider.js v1.1.0 jQuery Timelinr 0.9.52 jQuery Easing v1.3 jQuery is a fast and concise JavaScript Library that simplifies HTML document […]
[…] jQuery Timelinr […]
[…] jQuery Timelinr […]