Albe Timeline 4.0.0
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 |
Requirements
- Required Jquery
- Optional Animate CSS
Installation
Bower:
$ bower install jquery-albe-timeline --saveNodejs:
$ npm install jquery-albe-timeline --saveHow 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.3.1/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"> </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>' } }
