Responsive Timeline Plugin With jQuery And Bootstrap - eeyellow.Timeline

File Size: 366 KB
Views Total: 10384
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Responsive Timeline Plugin With jQuery And Bootstrap - eeyellow.Timeline

eeyellow.Timeline is a lightweight and simple-to-use jQuery plugin used to generate a responsive, vertical timeline from plain html markup.

Key features:

  • Responsive layout based on Bootstrap grid system.
  • Allow to expand / collapse event descriptions by clicking on the headers.
  • Allows to display multiple events as a carousel based on Bootstrap's carousel component.

How to use it:

1. Load the eeyellow.Timeline plugin and Bootstrap's CSS files in the header of the document.

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="jquery.eeyellow.Timeline.css">

2. Create the timeline and add you own events following the markup structure as follows:

<div class="VivaTimeline">
  <dl>
    <dt>May 2016</dt>                                    
    <dd class="pos-left clearfix">
      <div class="circ"></div>
      <div class="time">Feb 03</div>
      <div class="events">
          <div class="events-header">Event Heading</div>                                
          <div class="events-body">                                                                                            
              <div class="row">
                <div class="col-md-6 pull-left">
                      <img class="events-object img-responsive img-rounded" src="img/dog01.jpeg" />                                            
                  </div>
                  <div class="events-desc">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                  </div>
              </div>      
              <div class="row">
                <div class="col-md-6 pull-left">
                      <img class="events-object img-responsive img-rounded" src="img/dog02.jpeg" />                                            
                  </div>
                  <div class="events-desc">
                    Morbi at nisi vitae mauris pretium egestas. Morbi placerat risus ligula, nec placerat urna porta vel. Nullam sollicitudin orci quis odio eleifend, ut facilisis orci lobortis. Vivamus sed lobortis odio. Nam volutpat, leo a ullamcorper luctus, sapien libero auctor est, sed semper massa turpis sed quam. Mauris posuere, libero in ultricies dignissim, lacus purus egestas urna, nec semper lorem tellus non eros. Nam at bibendum libero. Curabitur a ante et orci cursus tincidunt. Vivamus dictum, libero et rhoncus congue, nulla erat mollis dui, vitae cursus dui justo quis velit. In a tellus arcu. Nam at lobortis nisl. Donec consequat placerat eros, quis elementum mauris sodales a. Maecenas id feugiat velit. Phasellus dictum eleifend varius. Cras nec orci turpis. Aenean ut turpis nibh.
                  </div>
              </div>  
              <div class="row">
                <div class="col-md-6 pull-left">
                      <img class="events-object img-responsive img-rounded" src="img/dog03.jpeg" />                                            
                  </div>
                  <div class="events-desc">
                    Cras condimentum, metus ut vehicula euismod, odio massa pulvinar neque, id gravida neque est et sem. Proin consequat id nibh quis molestie. Quisque vehicula purus id purus elementum facilisis. Phasellus sodales nibh quis neque rhoncus aliquet. Nunc eget ipsum efficitur, pretium arcu et, gravida purus. Phasellus tempor lacus ac enim pulvinar elementum. Integer aliquet justo lacinia nunc tempus vulputate.
                  </div>
              </div>                                    
          </div>   
          <div class="events-footer">
            123
          </div>                               
      </div>
    </dd>
    <dt>Feb 2016</dt>
    <dd class="pos-right clearfix">
      <div class="circ"></div>
      <div class="time">Jan 21</div>
      <div class="events">
          <div class="events-header">A Very Very Looooooooooooooooooooong Event Heading</div>                                
          <div class="events-body">                                                                                            
              <div class="row">
                <div class="col-md-6 pull-left">
                      <img class="events-object img-responsive img-rounded" src="img/cat01.jpeg" />
                  </div>
                  <div class="events-desc">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                  </div>
              </div>
              <div class="row">
                <div class="col-md-6 pull-left">
                      <img class="events-object img-responsive img-rounded" src="img/cat02.jpeg" />
                  </div>
                  <div class="events-desc">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                  </div>
              </div>
              <div class="row">
                <div class="col-md-6 pull-left">
                      <img class="events-object img-responsive img-rounded" src="img/cat03.jpeg" />
                  </div>
                  <div class="events-desc">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                  </div>
              </div>
          </div>       
          <div class="events-footer">
            
          </div>                                                       
      </div>
    </dd>   
    <dd class="pos-left clearfix">
      <div class="circ"></div>
      <div class="time">Jan 07</div>
      <div class="events">
          <div class="events-header">Event Heading</div>                                
          <div class="events-body">                                                                                            
              <div class="row">
                <div class="col-md-6 pull-left">
                      <img class="events-object img-responsive img-rounded" src="img/rabbit01.jpeg" />
                  </div>
                  <div class="events-desc">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                  </div>
              </div>
          </div>                                
      </div>
    </dd>                                    
    <dt>Jan 2016</dt>                        
    <dt>Dec 2015</dt>
    <dt>Oct 2015</dt>
    <dt>Sep 2015</dt>
    <dt>Aug 2015</dt>
  </dl>
</div>

3. Load the jQuery eeyellow.Timeline plugin's script and other required resources at the end of the document.

<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="jquery.eeyellow.Timeline.js"></script>

4. Call the function on the top container to initialize the timeline.

$('.VivaTimeline').vivaTimeline();

5. Enable/disable the carousel functionality.

$('.VivaTimeline').vivaTimeline({
  carousel: true
});

6. Change the default transition speed in the carousel.

$('.VivaTimeline').vivaTimeline({
  carousel: true,
  carouselTime: 3000
});

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