jQuery Timelinr

18/ago/2011 916

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.

    Otros Artículos Similares

    He estado impaciente para darme la libertad de investigar y escribir algo más avanzado utilizando CSS3 y animaciones, ya que el soporte de ciertas propiedades están más extendidas y si las comenzamos a utilizar en nuestros proyectos podemos forzar un […]

    Animaciones CSS3 avanzadas
    21/jun/2011 36

    Nuevamente vengo con un error de nuestro querido amigo IE6 que también es compartido por IE7 y el beta1 de IE8 (estos de Micro$oft no aprenden nunca…). Gracias a Rodrigo, me hizo notar que estos browsers no interpretan correctamente a […]

    <option disabled="disabled"> en IE6+
    31/dic/2008 6

    Este sencillo plugin permite generar dependencia entre 2 <select> y entre ellos mostrar la relación region / comuna que conforma la distribución geopolítica de la República de Chile.

    jQuery geoRegionalización
    22/ene/2014 0

    Comentarios

    1. Hexic - Multipurpose One Page Responsive WP Theme - Theme for Club [#]

      […] v1.1.0jQuery Masonry v2.1.08 – A dynamic layout plugin for jQueryjquery.slitslider.js v1.1.0jQuery Timelinr 0.9.52jQuery Easing v1.3jQuery is a fast and concise JavaScript Library that simplifies HTML document […]

    2. Hexic - Multipurpose One Page Responsive WP Theme - Theme for Tech [#]

      […] v1.1.0jQuery Masonry v2.1.08 – A dynamic layout plugin for jQueryjquery.slitslider.js v1.1.0jQuery Timelinr 0.9.52jQuery Easing v1.3jQuery is a fast and concise JavaScript Library that simplifies HTML document […]

    3. NewVision - Responsive Parallax One Page Template - Traclaborat [#]

      […] jquery-timelinr […]

    4. NewVision - Responsive Parallax One Page Template - Theme For u [#]

      […] jquery-timelinr […]

    Deja tu Comentario

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

    CSSLab

    CSSLab©

    ©2017 Todos los derechos reservados.

    Escrito y mantenido por Jorge Epuñan desde Santiago, Chile.