jquery-albe-timeline

Albe Timeline ^4.0.2

Albe Timeline is a simple yet highly customizable jQuery plugin that helps you render a responsive horizontal (or vertical) timeline from JSON data.

The data will be automatically grouped by year and the events will be sorted by date.

In addition, this plugin is able to handle almost any type of content such as images, videos, audios and more.

Use license

The plugin is open source and released for commercial use without cost. I only ask you to contact me if you implement it somewhere, so I can take a look or add it here as a demonstration.

Demonstration

HORIZONTAL	VERTICAL
Template 1	Template 1
	Template 2
	Template 3
	Template 4
	Template 5

Requirements

• Required Jquery
• Optional Animate CSS

Installation

Bower:

$ bower install jquery-albe-timeline --save

Npm:

$ npm install jquery-albe-timeline --save

How to use

Load the plugin and dependencies

<link rel="stylesheet" href="style-albe-timeline.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="jquery-albe-timeline.min.js"></script>

Create the data list

<script type="text/javascript">

   //Json object
   var data = [{
         time: '2015-04-30 23:59:59',
         header: 'Sample of header',
         body: [{
               tag: 'h1',
               content: 'Lorem ipsum'
            },
            {
               tag: 'p',
               content: 'Lorem ipsum dolor sit amet, nisl lorem.'
         }],
         footer: 'Sample of footer'
      },
      {
         time: '2016-01-20',
         body: [{
               tag: 'h2',
               content: 'Sample with link'
            },
            {
               tag: 'a',
               content: 'MY LINK',
               attr: {
                  href: 'http://albertino.eti.br',
                  target: '_blank',
                  title: 'Albertino Júnior'
               }
         }]
      }
   ];

</script>

Make the call

<div id="myTimeline"></div>

<script type="text/javascript">

  //Json object
  var data = [{...}];
   
  $(document).ready(function () {
      $('#myTimeline').albeTimeline(data);
  });
  
</script>

• Instance with options:

  //**myTimeline**, sets the identifier of the element that will receive the entire timeline (for example, a DIV) and must be unique for each timeline on the page.
  //**data**, defines the Json object containing the list of data to be displayed.
  
  $('#myTimeline').albeTimeline(data, {
    //Effect of presentation
    //'fadeInUp', 'bounceIn', etc
    effect: 'zoomInUp',
    //Sets the visibility of the annual grouper
    showGroup: true,
    //Sets the anchor menu visibility for annual groupings (depends on 'showGroup')
    showMenu: true,
    //Specifies the display language of texts (i18n)
    language: 'pt-BR',
    //Sets the date display format
    //'dd/MM/yyyy', 'dd de MMMM de yyyy HH:mm:ss', etc
    formatDate : 'dd MMMM',
    //Defines ordering of items
    //true: Descendente
    //false: Ascendente
    sortDesc: true
  });

• Set the culture:

$(document).ready(function () {
    
    //Overrides the CutureInfo default plugin
    $.fn.albeTimeline.languages = {
        "en-US": {
            days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
            months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
            shortMonths: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
            msgEmptyContent: "No information to display."
        },
        "es-ES": {
            days: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"],
            months: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
            shortMonths: ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"],
            msgEmptyContent: "No hay información para mostrar."
        },
        "fr-FR": {
            days: ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"],
            months: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
            shortMonths: ["Jan", "Fév", "Mar", "Avr", "Mai", "Juin", "Juil", "Août", "Sep", "Oct", "Nov", "Déc"],
            msgEmptyContent: "Aucune information à afficher."
        }
    };

    //Internationalization
    $('#myTimeline').albeTimeline(data, {
        language: 'fr-FR',	//default: pt-BR
        formatDate: 'DD, dd MMMM aaaaa'
    });

});

Html Structure

Using the plugin defaults, we'll have a similar result:

  <div id="myTimeline">
    <section id="timeline">
      <div id="year2016" class="group2016">2016</div>
      <article class="animated fadeInUp">
        <div class="panel">
          <div class="badge">20 Jan</div>
          <div class="panel-body">
            <img src="../img/qrcode.png" width="150px" class="img-responsive">
            <h2>Sample with image</h2>
            <p>Lorem ipsum dolor sit amet, nisl lorem.</p>
          </div>
        </div>
      </article>
      <div id="year2015" class="group2015">2015</div>
      <article class="animated fadeInUp inverted">
        <div class="panel">
          <div class="badge">29 Mar</div>
          <div class="panel-heading">
            <h4 class="panel-title">Sample of header</h4>
          </div>
          <div class="panel-body">
            <h1>Lorem ipsum</h1>
            <p>Lorem ipsum dolor sit amet, nisl lorem.</p>
          </div>
          <div class="panel-footer">Sample of footer</div>
        </div>
      </article>
      <article class="animated fadeInUp">
        <div class="panel">
          <div class="badge">&nbsp;</div>
        </div>
      </article>
      <div class="clearfix" style="float: none;"></div>
    </section>
  </div>

Notes

• The Json object is also accepted in string format. For example:

$('#myTimeline').albeTimeline('[{"time": "2016-01-20", "body": [{ "tag": "h1", "content": "Lorem ipsum" }, { "tag": "p", "content": "massa, cursus quisque leo quisque dui." }]}]');

• The time element must meet the ISO 8601 standard in year-month-day format "yyyy-MM-dd" or "yyyy-MM-dd HH:mm:ss"

• If you need to pass a CSS class as an element attribute, use the property name cssclass. For example:

  body: [{
    tag: 'img',
    attr: {
      src: '../img/qrcode.png',
      width: '150px',
      cssclass: 'img-responsive'
    }
  }

• For double quotes in attributes, use "escape". For example:

  body: [{
    tag: 'p',
    content: 'Lorem ipsum dolor sit amet. See <a href=\"https://github.com/Albejr/jquery-albe-timeline\" target=\"_blank\">more details</a>'
    }
  }