Fancy Timeline

How to

• First, include in your html the javascript and css links to the file provided:

  <script type="text/javascript" src="js/fancy-timeline.js"></script>
  <link type="text/css" href="css/ftl-default/fancy-timeline.css" rel="stylesheet" />
  

• Then you need to generate some data like this:

  var dates = [
    {
    "marker": "marker1", 
    "type": "default",
    "title": "title 1" ,
    "content": "Here is the content 1"
    },
    {
    "marker": "marker2", 
    "type": "default",
    "title": "title 2" ,
    "content": "Here is the content 2"
    }
  ];
  

• Your can also use other item types, like image and youtube-video, here's how to use them:'

  
    {
        "marker": "1991", 
        "type": "youtube-video",
        "title": "Ten" ,
        "youtubeId": "VbhsYC4gKy4" ,
        "content": "With the success of Ten, Pearl Jam became a key member of the Seattle grunge explosion."
    },
    {
        "marker": "1992", 
        "type": "image",
        "title": "Nirvana",
        "img": "http://upload.wikimedia.org/wikipedia/commons/1/19/Nirvana_around_1992.jpg",
        "content": "Kurt Cobain (front) and Krist Novoselic (left) live at the 1992"
    }
  

• Then, select with jquery:

  $(".timeline-container").fancyTimeline({
    initPos: 0,
      data: dates
  });
  

Examples

Here is a small live example:example.

Author

Juan Manuel Agüero: about & contact.