Create an Animated Timeline with jQuery

I’ve been meaning to write about this plugin for some time but never got around to it until now! This great plugin written by csslab.cl helps you beautifully present timelines and has support for both horizontal and vertical layouts.

jQuery Timelinr

After including the timelinr.js plugin file, to get it working all you need to do is call the basic method below and include the setup HTML at the bottom of the page. Checkout the horizontal and vertical demos

$(function(){
   $().timelinr();
});

$(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)< });
   });

The HTML

<div id="timeline">
   <ul id="dates">
      <li><a href="#2013">2013</a></li>
      <li><a href="#2014">2014</a></li>
   </ul>
   <ul id="issues">
      <li id="2013">
<h1>Title</h1>
         <p>Lorem ipsum.</p>
      </li>
      <li id="2014">
         <p>Lorem ipsum.</p>
      </li>
   </ul>
   <!-- optional buttons -->
   <a href="#" id="next">Next</a>
   <a href="#" id="prev">Previous</a>
</div>