Responsive Yearly Time Line Plugin For jQuery - Timeliny

Timeliny is a simple to use jQuery plugin for generating a responsive, interactive yearly timeline that allows you to scroll through events via drag and drop.

How to use it:

1. Include the jquery.timeliny.css in the head section that provides the basic styles for your yearly timeline.

<link href="dist/jquery.timeliny.css" rel="stylesheet">

2. The plugin requires minimal plain html structure like this:

<div id="example">
  <div data-year="2012">jQueryScript Established</div>
  <div data-year="2013">1000+ Free jQuery Plugins</div>
  <div data-year="2014">3000+ Free jQuery Plugins</div>
  <div data-year="2015">4500+ Free jQuery Plugins</div>
  <div data-year="2016" class="active">5500+ Free jQuery Plugins</div>
</div>

3. Include the jquery.timeliny.css after loading jQuery library, before we close the body tag.

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="dist/jquery.timeliny.js"></script>

4. Generate a default yearly timeline on the webpage.

$('#example').timeliny();

5. Default plugin options. Options can be overwritten when initializing plugin, by passing an object literal, or after initialization.

$('#example').timeliny({

  // or 'desc'
  order: 'asc',

  // classname for the timeline
  className: 'timeliny',

  // timeline wrapper
  wrapper: '<div class="timeliny-wrapper"></div>',

  // boundaries
  boundaries: 2,

  // animation speed in ms
  animationSpeed: 250,

  // hides blank years
  hideBlankYears: false,

  // callbacks
  onInit: function() {},
  onDestroy: function() {},
  afterLoad: function(currYear) {},
  onLeave: function(currYear, nextYear) {},
  afterChange: function(currYear) {},
  afterResize: function() {}
  
});

6. Goto a specified year.

$('#example').timeliny('goToYear', '2012');

7. Destroy the plugin and remove the timeline from the DOM.

$('#example').timeliny('destroy');

Change log:

2018-04-22

• v1.0.2: Arrow keys navigation

2017-01-28

• hideBlankYears option added

---

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