jQuery Timeline is an attractive tool to showcase the process followed over years. It’s a plug-in and it can be easily integrated with your application using jQuery library. This simple plugin helps you to give more life to the boring timelines. Supports horizontal and vertical layouts, and you can specify parameters for most attributes: speed, transparency, etc..
Timeline jQuery Plugin features
i) Speed
ii) Orientation
iii) Autoplay
iv) Start with
v) Arrow keys
vi) Arrow text…etc
Configuration steps are as follows,
Step1:
Include jQuery Library and plug in :
|
1 2 |
<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script> <script src="js/jquery.timelinr-0.9.js" type="text/javascript"></script> |
Step2:
Initialize the plug in :
|
1 2 3 4 5 |
<script type="text/javascript"> $(function(){ $().timelinr(); }); </script> |
Step3:
HTML markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div id="timeline"> <ul id="dates"> <li><a href="#">date1</a></li> <li><a href="#">date2</a></li> </ul> <ul id="issues"> <li id="date1"> <p>Lorem ipsum.</p> </li> <li id="date2"> <p>Lorem ipsum.</p> </li> </ul> <a href="#" id="next">+</a> <!-- optional --> <a href="#" id="prev">-</a> <!-- optional --> </div> |
Requirement:- jQuery Library
Demo:- http://www.csslab.cl/ejemplos/timelinr/latest/autoplay.html
Download:- http://mydons.com/download/75b5411e5c83ea7e9a8f9f80d0746f21/jQueryTimelinr_094.zip
License:- License Free
0 Comments Leave a comment