jQuery Timelinr

18/ago/2011 837

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

    Deja tu Comentario

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

    CSSLab