Awesome jQuery-based responsive timeline generator
If you want to add time line feature in your website like facebook, Then here i am going to introduce awesome jQuery-based responsive timeline generator plugin created by RyanFitzgerald, With the help of this plugin you can easily create vertical static and dynamic timeline which may display your life journey or your profession or company journey with more attractive manner.
Timeline is a responsive, jQuery-based generator that builds a timeline based on user input. It comes with a number of customization options out of the box such as displaying dates, alternating toggle, animation, and choosing which side it starts on. It comes with little to no styling other than what it required, so it can be styled to suite your specific needs. I originally created a timeline for my personal website, however I have since found a number of possible reuse options for it, so I decided to create this simple plugin.
Integration of jQuery-based responsive timeline generator on your website
First you need to add required dependent CSS, JS libraries on page
<!-- CSS --> <link rel="stylesheet" href="vertical-timeline.css"> <!-- JS --> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script src="vertical-timeline.min.js"></script> |
HTML
In this section add html which need to use as timeline, Add data-vtdate attribute on div to display date along with timeline paragraph.
<div id="timeline"> <div data-vtdate="September 2016"> <h3>Lorem ipsum dolor sit amet</h3> <p> Proin mattis nisl non est dapibus elementum. Etiam varius, purus sodales varius tempor, mauris nunc hendrerit velit, vitae interdum quam erat non lorem. Fusce luctus malesuada neque nec pretium. In sed turpis dui. </p> </div> <div data-vtdate="March 2016"> <h3>Lorem ipsum dolor sit amet</h3> <p> Proin mattis nisl non est dapibus elementum. Etiam varius, purus sodales varius tempor, mauris nunc hendrerit velit, vitae interdum quam erat non lorem. Fusce luctus malesuada neque nec pretium. In sed turpis dui. </p> </div> <div data-vtdate="January 2016"> <h3>Lorem ipsum dolor sit amet</h3> <p> Proin mattis nisl non est dapibus elementum. Etiam varius, purus sodales varius tempor, mauris nunc hendrerit velit, vitae interdum quam erat non lorem. Fusce luctus malesuada neque nec pretium. In sed turpis dui. </p> </div> </div> |
jQuery
Action time..!! finally add verticalTimeline() function on page to make your timeline actionable.
<script> $(function() { $('#timeline').verticalTimeline(); }); </script> |
Timeline has a few options that can be customized to suite your specific needs. The included options that can be utilized are:
<script> $(function() { $('#timeline').verticalTimeline({ startLeft: false, alternate: true, animate: "fade", // or slide arrows: false }); </script> |
See live demo and download source code.
DEMO | DOWNLOAD
Visit official github repository for more information and customization.