Responsive Horizontal Timeline with jQuery

Category: Others | December 15, 2019
Responsive Horizontal Timeline with jQuery
Author: Albejr
Official Page: Go to Website
Last Update:December 15, 2019
License:MIT

The “Albe Timeline” is a highly customizable and lightweight jQuery that lets you create a responsive horizontal timeline. It is fully compatible with different types of browsers and works well.

Additionally, the plugin renders timeline data from the JSON data file. This means you don’t need to edit the HTML code every time whenever you need to change the data.

Moreover, it helps you keep the data dynamic and whenever you need to change it, you simply need to edit the JSON file and you are done.

This horizontal timeline plugin also uses the animation CSS library to show the story with special animated effects. The animation enhances the user experience and offers a nice and clean effect.

Not only this,  the plugin comes with 5 built-in timeline templates (Audain, Horizontal, Minimalist, Simple and Vertical).

In addition, You can easily display the timeline data both horizontally and vertically. By further customization, you can make it look just according to your client design requirements.

It has a lot of options which allow you to enable or disable different features. Like you can group the data by year and the events will be sorted by date.

Similarly, you can add different types of content such as images, videos, audios and much more.

How to Build a Responsive Horizontal Timeline

To build the Timeline plugin you need to Load the jQuery JavaScript library, Animate CSS and Albe Timeline CSS & JavaScript files into your HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- Albe Timeline CSS -->
<link rel="stylesheet" href="css/style-albe-timeline.css" />
<!-- Albe Timeline JS -->
<script src="js/jquery-albe-timeline.min.js"></script>

After that, you need to create a separate file and define your timeline data in JSON (JavaScript Object Notation). You should also need to add this file before closing the head tag.

//Json Object
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. See <a href=\"https://github.com/Albejr/jquery-albe-timeline\" target=\"_blank\">more details</a>'
},
{
	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.  See <a href=\"https://github.com/Albejr/jquery-albe-timeline\" target=\"_blank\">more details</a>'
	}],
},
{
	time: '2016-01-20',
	body: [{
		tag: 'img',
		attr: {
			src: './img/qrcode.png',
			width: '150px',
			cssclass: 'img-responsive'
		}
	},
	{
		tag: 'h2',
		content: 'Sample with image'
	},
	{
		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.'
	}]
},
{
	time: '2013-01-20',
	body: [{
		tag: 'img',
		attr: {
			src: './img/girl.png',
			width: '100px',
			cssclass: 'img-responsive'
		}
	},
	{
		tag: 'h2',
		content: 'Sample with image rigth'
	},
	{
		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.'
	}]
}
];

The next thing to create a create a div element with a unique ID in which your timeline will be loaded dynamically.

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

Finally, to initialize the plugin in jQuery document ready function.

$(document).ready(function () {
	$('#myTimeline').albeTimeline(data, {
		effect: "zoomIn",
		showMenu: false
	});
});

 Advanced Options for Horizontal Timeline

The following are some advanced configuration options to customize the jQuery Responsive horizontal timeline.

OptionDescription, Default, Type
effectEffect of presentation wether ‘fadeInUp’, ‘bounceIn’, etc.

$('#myTimeline').albeTimeline(data, {
  effect: "zoomIn",
});
showGroupSets the visibility of the annual grouper

$('#myTimeline').albeTimeline(data, {
   showGroup: "true",
});
showMenuSets the anchor menu visibility for annual groupings (depends on ‘showgrounds’)

$('#myTimeline').albeTimeline(data, {
   showMenu:"true",
});
languageSpecifies the display language of texts (i18n)

$('#myTimeline').albeTimeline(data, {
   language: "pt-BR",
});
formatDateSets the date display format: ‘dd/MM/yyyy’, ‘dd de MMMM de yyyy HH:mm:ss’, etc

$('#myTimeline').albeTimeline(data, {
   formatDate:'dd MMMM',
});
sortDescDefines ordering of items: true: Descendente and false: Ascendente

$('#myTimeline').albeTimeline(data, {
  sortDesc:true,
});

You May Also Like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.