jQuery Timelinr

18/Ago/2011 99418

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 2011, CSSLab.cl – Free under the MIT license.

    Otros Artículos Similares

    El efecto Parallax es una técnica que consiste en aplicar el efecto de profundidad a través de capas, utlizando principalmente CSS. Con esto podemos simular un pseudo-3D dentro de un escenario. Esta técnica es prácticamente la misma utilizada en los […]

    Reproduciendo Parallax
    26/May/2008 182

    A raíz de mi proyecto musical más reciente lanzado, incluyendo el sitio web donde me divertí mucho utilizando Mootools para sus diferentes funcionalidades, iré ampliando los artículos relacionados con este framework de JS explicando los puntos más importantes de su […]

    Ventana modal sólo con CSS
    30/Ene/2008 1196

    Crear estructuras líquidas para tu sitio web puede llegar a ser un gran problema debido a los muchos factores que se deben tomar en cuenta cuando el usuario escala el browser: imágenes que se pueden pasar del ancho, textos que no se cortarán como esperabas, columnas que pueden llegar a quebrarse… sin hablar de que trabajar con porcentajes es problemático entre los diferentes navegadores.

    jQuery browserSizr
    22/Jul/2009 21175

    Comentarios

    1. otezejid [#]

      Psychotherapy ihf.pmdh.csslab.cl.opb.iq bypassing, extensors atrioventricular [URL=http://eyogsupplements.com/item/stromectol-prices/ – stromectol[/URL – [URL=http://naturalgolfsolutions.com/buy-prednisone-online-cheap/ – prednisone[/URL – [URL=http://damcf.org/stromectol-online/ – stromectol lowest price[/URL – [URL=http://damcf.org/stromectol/ – stromectol[/URL – [URL=http://otrmatters.com/item/pharmacy-prices-for-prednisone/ – prednisone[/URL – [URL=http://elearning101.org/item/stromectol-without-dr-prescription/ – stromectol buy in canada[/URL – [URL=http://wow-70.com/order-stromectol/ – stromectol in usa[/URL – [URL=http://lowesmobileplants.com/prednisone-com/ – cheapest prednisone dosage price[/URL – [URL=http://eyogsupplements.com/item/cheap-stromectol-online/ – on line stromectol[/URL – squint; population cheap stromectol online buy cheap prednisone stromectol online from mexico stromectol sales mexico prednisone stromectol brand canadian stromectol stromectol generic generic prednisone online prednisone.com stromectol capsules for sale decompensation here, http://eyogsupplements.com/item/stromectol-prices/ stromectol prices http://naturalgolfsolutions.com/buy-prednisone-online-cheap/ buy prednisone online cheap http://damcf.org/stromectol-online/ stromectol online http://damcf.org/stromectol/ stromectol generic pills http://otrmatters.com/item/pharmacy-prices-for-prednisone/ prednisone http://elearning101.org/item/stromectol-without-dr-prescription/ stromectol without dr prescription http://wow-70.com/order-stromectol/ stromectol http://lowesmobileplants.com/prednisone-com/ generic prednisone uk http://eyogsupplements.com/item/cheap-stromectol-online/ cheap stromectol online sex-linked milestones.

    CSSLab

    CSSLab©

    © 2014 - 2021 Todos los derechos reservados.

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