Responsive Yearly Time Line Plugin For jQuery - Timeliny
File Size: | 21.6 KB |
---|---|
Views Total: | 12104 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.