Customizable JSON Based jQuery Timeline Plugin - Albe Timeline

Albe Timeline is a simple yet highly customizable jQuery plugin that helps you render a responsive horizontal (or vertical) timeline from JSON data. The data will be automatically grouped by year and the events will be sorted by date. In addition, this plugin is able to handle almost any type of content such as images, videos, audios and more.

How to use it:

1. Load the Animate.css for the CSS3 powered animations (Optional).

<link rel="stylesheet" href="/path/to/animate.min.css">

2. Load jQuery library and the jQuery Albe Timeline plugin's script right before the closing body tag.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery-albe-timeline.js"></script>

3. Create a DIV container to hold the timeline.

<div id="myTimeline">
</div>

4. Prepare your data to be presented in this timeline.

var data = [{
    time: '2015-03-29',
    header: 'Sample of header',
    body: [{
        tag: 'h1',
        content: "Lorem ipsum"
    },
    {
        tag: 'p',
        content: 'Lorem ipsum dolor sit amet, nisl lorem, wisi egestas orci tempus class massa, suscipit eu elit urna in urna, gravida wisi aenean eros massa, cursus quisque leo quisque dui.'
    }],
    footer: 'Sample of footer'
  },
  {
    time: '2015-04-15',
    body: [{
        tag: 'h1',
        content: "Basic content"
    },
    {
        tag: 'p',
        content: 'Lorem ipsum dolor sit amet, nisl lorem, wisi egestas orci tempus class massa, suscipit eu elit urna in urna, gravida wisi aenean eros massa, cursus quisque leo quisque dui.'
    }],
  }
  ...
];

5. Call the function to render a timeline on the webpage.

$("#myTimeline").albeTimeline(data);

6. You can pass the following option object as the second parameter to the albeTimeline method.

$("#myTimeline").albeTimeline(data,{


  // animation type
  // requires Animate.css
  effect: "fadeInUp",

  // date format
  formatDate: 'dd MMM',

  // shows navigation menu
  showMenu: true,

  // shows group
  showGroup: true,

  // for i18n
  language: "en-us",

  // sorts events by date
  sortDesc: true

});

Changelog:

2022-05-09

• v4.0.2 :change text to html at datetime tag.

2020-09-08

• v4.0.1: Update jquery-albe-timeline.js

2018-05-22

• v4.0.0: With datetime.

2017-07-25

• v3.0.0: JS update

2017-07-20

• v2.1.1: JS update

2017-07-07

• v2.1.0: JS update

2017-06-29

• v2.0.2: JS update

2017-03-29

• v2.0.1: JS update

2017-03-28

• v2.0.0: JS update

2017-03-18

• v1.1.2: Array sort

2017-03-07

• JS update

 

---

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