Touch-enabled jQuery Timeline Plugin with 3D Flipping Effects - Timecube

File Size: 43 KB
Views Total: 34495
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Touch-enabled jQuery Timeline Plugin with 3D Flipping Effects - Timecube

Timecube is a fancy jQuery timeline plugin that allows you to navigation through JSON based events by mouse or touch swipe in an animated 3D cube interface based on CSS3 perspective, transition and transform properties. Currently supports Chrome, Opera and Safari.

How to use it:

1. Load the timecube.jquery.css in the head section of your page.

<link rel="stylesheet" type="text/css" href="css/timecube.jquery.css">

2. Create an empty container for the timeline.

<div id="content-wrapper">
<div id="timeline" class="timeCube"></div>
</div>

3. Load the jQuery javascript library and jQuery Timecube plugin at the bottom of the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/timecube.jquery.js"></script> 

4. Create the events using JSON data format in the javascript and call the plugin with options.

// Prevent scrolling
document.body.addEventListener('touchstart', function(e){  
// allow clicks on links within the moveable area
if($(e.target).is('a, iframe')) {
return true;
}
e.preventDefault();
});

document.body.addEventListener('touchmove', function(e){ 
e.preventDefault();
});

// Events
var json = [{
title: 'Title 1',
description: "Description 1",
startDate: (new Date('August 31, 2009 10:29:00 pm GMT+0')),
endDate: null
},
{
title: 'Title 2',
description: "Description 2",
startDate: (new Date('December 15, 2010 00:00:00 am GMT+0')),
endDate: null
},
{     
title: 'Title 3',
description: "Description 3",
startDate: (new Date('December 18, 2010 00:00:00 am GMT+0')),
endDate: null
}
...
];

// Initialize the plugin
$("#timeline").timeCube({
data: json,
granularity: "year",
startDate: new Date('August 31, 2009 10:20:00 pm GMT+0'),
endDate: new Date('September 30, 2011 02:20:00 am GMT+0'),
transitionAngle: 60,
transitionSpacing: 100,
nextButton: $("#next-link"),
previousButton: $("#prev-link"),
showDate: false
});

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