Simple jQuery Timeline Plugin - Timelinr

Timelinr is a simple jQuery Timeline Plugin that makes it easy to create awesome timeline effects for your website. It supports horizontal and vertical layouts, and you can specify parameters for most attributes: speed, transparency, etc.

How to use it:

1. Include jQuery Library and Timelinr.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/jquery.timelinr-0.9.52.js"></script>

2. Inicialize the plugin

<script> 
$(function(){
$().timelinr({
autoPlay: 'true',
autoPlayDirection: 'forward',
startAt: 4
})
});
</script>

3. Options with default values.

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

   });

4. Markup

<div id="timeline">
<ul id="dates">
<li><a href="#1900">1900</a></li>
<li><a href="#1944">1944</a></li>
<li><a href="#1950">1950</a></li>
<li><a href="#1971">1971</a></li>
<li><a href="#1999">1999</a></li>
<li><a href="#2001">2001</a></li>
<li><a href="#2011">2011</a></li>
</ul>
<ul id="issues">
<li id="1900">
<img src="images/1.png" width="256" height="256" />
<h1>1900</h1>
<p>...</p>
</li>
<li id="1944">
<img src="images/3.png" width="256" height="256" />
<h1>1944</h1>
<p>...</p>
</li>
<li id="1950">
<img src="images/4.png" width="256" height="256" />
<h1>1950</h1>
<p>...</p>
</li>
<li id="1971">
<img src="images/5.png" width="256" height="256" />
<h1>1971</h1>
<p>...</p>
</li>
<li id="1999">
<img src="images/8.png" width="256" height="256" />
<h1>1999</h1>
<p>...</p>
</li>
<li id="2001">
<img src="images/9.png" width="256" height="256" />
<h1>2001</h1>
<p>...</p>
</li>
<li id="2011">
<img src="images/10.png" width="256" height="256" />
<h1>2011</h1>
<p>...</p>
</li>
</ul>
<div id="grad_left"></div>
<div id="grad_right"></div>
</div>

Change log:

2018-05-12

• New version 0.9.7

2016-02-02

• New version 0.9.6

2013-12-13

• bugfix: large timelines now gets centered

---

This awesome jQuery plugin is developed by juanbrujo. For more Advanced Usages, please check the demo page or visit the official website.