jQuery Timelinr

18/ago/2011 851

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.54

Configuration:

  • Include the jQuery library and this plugin:
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.timelinr-0.9.53.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.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.54

    Configuración:

    • Incluye la librería jQuery y luego este plugin:
    <script src="js/jquery-1.7.1.min.js"></script>
    <script src="js/jquery.timelinr-0.9.53.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.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 (Business) | oexeo [#]

      […] jQuery Timelinr […]

    2. Templates Yacht - Marine HTML 5 Template (Business) - Templates [#]

      […] jQuery Timelinr […]

    3. Yacht – Marine HTML 5 Template (Business) | Leads Themes [#]

      […] jQuery Timelinr […]

    4. Yacht – Marine HTML 5 Template (Business) | TypoGraffix [#]

      […] jQuery Timelinr […]

    5. Yacht – Marine HTML 5 Template (Business) | Sell Buy Ideas [#]

      […] jQuery Timelinr […]

    6. Yacht - Marine HTML 5 Template (Business) [#]

      […] jQuery Timelinr […]

    7. Yacht – Marine HTML 5 Template (Business) | W3Pile.com [#]

      […] jQuery Timelinr […]

    8. Yacht - Marine HTML 5 Template (Business) - SastoMarket [#]

      […] jQuery Timelinr […]

    9. Yacht - Marine HTML 5 Template (Business) - ThemearificThemearific [#]

      […] jQuery Timelinr […]

    10. Yacht – Marine HTML 5 Template (Business) | Affiliate Money Maker [#]

      […] jQuery Timelinr […]

    11. Yacht - Marine HTML 5 Template (Business) | Free Wordpress Themes [#]

      […] jQuery Timelinr […]

    12. Yacht - Marine HTML 5 Template (Business) - SEO MeterSEO Meter [#]

      […] jQuery Timelinr […]

    13. Yacht – Marine HTML 5 Template (Business) – FoneLeaks [#]

      […] jQuery Timelinr […]

    14. Yacht – Marine HTML 5 Template (Business) | PSD Bank [#]

      […] jQuery Timelinr […]

    15. Yacht - Marine HTML 5 Template | Corporate [#]

      […] jQuery Timelinr […]

    16. Free Download Yacht - Marine HTML 5 Template (Business) Nulled Clean [#]

      […] jQuery Timelinr […]

    17. Yacht - Marine HTML 5 Template (Business) - Web Themes [#]

      […] jQuery Timelinr […]

    18. Yacht - Marine HTML 5 Template (Business) | ThemeForest [#]

      […] jQuery Timelinr […]

    19. Yacht – Marine HTML 5 Template (Business) | Envato Brasil [#]

      […] jQuery Timelinr […]

    20. Yacht – Marine HTML 5 Template (Business) | themeFORK [#]

      […] jQuery Timelinr […]

    21. Yacht – Marine HTML 5 Template (Business) | doi-tile.com [#]

      […] jQuery Timelinr […]

    22. Birva – Creative One Page Theme | WordPress 版型王 ThemeKing [#]

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

    23. Yacht - Marine HTML 5 Template (Business) - Fast Stream Ads [#]

      […] jQuery Timelinr […]

    24. Yacht – Marine HTML 5 Template (Business) | WP Themes & Templates [#]

      […] jQuery Timelinr […]

    25. Birva - Creative One Page Theme (Portfolio) | Allofthemes.com [#]

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

    26. Birva – Creative One Page Theme (Portfolio) | Envanto Products [#]

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

    27. Yacht – Marine HTML 5 Template (Business) | Theme phauxie [#]

      […] jQuery Timelinr […]

    28. What is the most proper js library for “tree-like” chart - DL-UAT [#]

      […] spent a lot of time to find proper js library (TimelineJS, csslab, TimegliderJS, Tiki-Toki, Highcharts, Jscharts, Google), but noone has similar to one vertical […]

    29. Yacht – Marine HTML 5 Template (Business) | Best Envato [#]

      […] jQuery Timelinr […]

    30. Yacht - Marine HTML 5 Template (Business) - Envato Market [#]

      […] jQuery Timelinr […]

    31. 70+不同类型的jQuery Slider教程与DEMO | 挖沙啦挖沙啦 [#]

      […] 27、jQuery Timelinr […]

    32. Nulled Free Birva - Creative One Page Theme Download [#]

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

    33. Nulled Free Hexic - Multipurpose One Page Responsive WP Theme Download [#]

      […] jQuery Timelinr 0.9.52 […]

    34. Nulled Free Yacht - Marine HTML 5 Template Download [#]

      […] jQuery Timelinr […]

    35. 70+不同类型的jQuery Slider教程与DEMO – 前端谷 [#]

      […] 27、jQuery Timelinr […]

    36. Rehan [#]

      Timelinr has no option to pause on mouse hover, please provide this functionality with it. thanks

    Deja tu Comentario

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

    CSSLab