jQuery Timelinr

18/ago/2011 878

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>
  • Inicialize-it with the default parameters:
  • $(function(){
       $().timelinr();
    });
  • Or configure it as preferred:
  • $(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>
  • Inicialízalo con los parámetros por defecto:
  • $(function(){
    $().timelinr();
    });
  • O customízalos:
  • $(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.

    Demo Horizontal

    Demo Vertical

    Demo Autoplay

    Download/Bajar Plugin + Demos

    Copyright 2012, CSSLab.cl – Free under the MIT license.

    Comentarios

    1. Yacht - Marine HTML 5 Template - 9Theme [#]

      […] jQuery Timelinr […]

    2. Mark Andrews [#]

      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

      • Jorge Epuñan [#]

        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.

      • Matt [#]

        How can I link to a particular time on the timeline with a link from an external HTML page?

        • Jorge Epuñan [#]

          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.

    3. Samy [#]

      Hola, me encanta este timeliner, excelente diseño.
      Una sugerencia, sería genial que incluyeran un vídeo tutorial de cómo instalarlo.

    4. Timelines for Your Digital Signage Presentations [#]

      […] 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. […]

    5. Timelines for Your Digital Signage Presentations [#]

      […] 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. […]

    6. Roma Khomych [#]

      how to initialize two object like a time line on the same page?

    7. 30+ Free Responsive jQuery Image and Content Sliders Download [#]

      […] Download View Demo […]

    8. jQuery时间轴插件:jQuery Timelinr用法详解 | AYAO [#]

      […] jQuery Timelinr依赖于jQuery,所以在html中要先载入jQuery库和jQuery Timelinr插件。 […]

    9. Ashi [#]

      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.

      • Ashi [#]

        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.

    10. Feijo [#]

      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 :(

      • Jorge Epuñan [#]

        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.

        • elen [#]

          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

        • Jorge Epuñan [#]

          Elen: if you can share an URL maybe I can help you. You shouldn’t have problem, maybe it’s just CSS.

    11. navneet [#]

      Hello how can i embedd this plug in into my wesbite in a seperate div?

    12. Birva - Creative One Page Theme - Mister templates [#]

      […] jquery.timelinr-0.9.54.js […]

    13. leiyuling [#]

      I want to control auto-play How to do it???

    14. Ricardo Dos Santos [#]

      Hermano, esto necesita un responsive urgente

    15. Timelinr简单的时间线jQuery插件 - 文章教程 - 框架类库 - 问说网 [#]

      […] 项目地址:http://www.csslab.cl/2011/08/18/jquery-timelinr/ […]

    16. r8quver [#]

      Hi, Your timeline looks awesome, thats why I have installed the module your timelinr. But I can’t see it in my contentype, why?

    17. jQuery Timelinr | Medien Szenen [#]

      […] jQuery Timelinr […]

    Deja tu Comentario

    Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

    CSSLab