Timelinr, une frise chronologique sous forme de slider jQuery

23 octobre 2011

Timelinr est un plugin jQuery permettant de mettre en place une frise chronologique, aussi appelée « timeline », sous forme de slider, afin de proposer une représentation linéaire d’événements originale et animée.

Une frise chronologique

Timelinr permet d’enrichir la manière de présenter une frise chronologique en associant des événements à des dates. La navigation se fait soit via les boutons prévus à cet effet, soit via les dates et lorsqu’un événement est slidé, la date qui lui correspond se place à son niveau, et ainsi de suite.

Il existe plusieurs options qui donnent la possibilité de définir l’orientation et la vitesse d’animation du slider, le degré de transparence, ou encore la lecture automatique. Quelques propriétés CSS3 ont été utilisées dans les différentes démonstrations afin d’accentuer les effets d’animation mais elles sont indépendantes du plugin. Le CSS est également personnalisable via une feuille de style.

Configuration de Timelinr

Il faut commencer par inclure les librairies JavaScript : jQuery et le plugin Timelinr.

<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="js/jquery.timelinr-0.9.js" type="text/javascript"></script>

Puis il faut définir la structure HTML avec vos contenus et les dates qui leur sont associées :

<div id="timeline">
   <ul id="dates">
      <li><a href="#">date1</a></li>
      <li><a href="#">date2</a></li>
   </ul>
   <ul id="issues">
      <li id="date1">
         <p>Lorem ipsum.</p>
      </li>
      <li id="date2">
         <p>Lorem ipsum.</p>
      </li>
   </ul>
   <a href="#" id="next">+</a> <!-- optional -->
   <a href="#" id="prev">-</a> <!-- optional -->
</div>

Et enfin, faire un appel à la fonction timelinr() comme ceci :

$(function(){
   $().timelinr();
});

Les options

Voici les différentes options pour personnaliser au mieux votre frise chronologique :

  • orientation définit la direction de la frise (« horizontal » ou « vertical »)
  • containerDiv définit l’id de la balise HTML englobante (« #timeline » par défaut)
  • datesDiv définit l’id de la balise HTML des dates (« #dates » par défaut)
  • datesSelectedClass définit la classe de sélection d’une date (« selected » par défaut)
  • datesSpeed définit la vitesse de déplacement des dates en milliseconde (500 par défaut)
  • issuesDiv définit l’id de la balise HTML des événéments (« #issues » par défaut)
  • issuesSelectedClass définit la classe de sélection d’un événement (« selected » par défaut)
  • issuesSpeed définit la vitesse de déplacement des événements en milliseconde (200 par défaut)
  • issuesTransparency définit le degré de transparence d’un événement (0.2 par défaut)
  • issuesTransparencySpeed définit le changement de transparence en milliseconde (500 par défaut)
  • prevButton définit l’id du bouton Précédent (« #prev » par défaut)
  • nextButton définit l’id du bouton Suivant (« #next » par défaut)

Et pour les utiliser, il faut procéder de la manière suivante :

$(function(){
   $().timelinr({
      orientation: 'horizontal',
      containerDiv: '#timeline',
      datesDiv: '#dates',
      autoPlayPause: 2000
   });
});

Timelinr est donc un plugin jQuery qui peut amèner un véritable plus dans la présentation de vos frises chronologiques !

Requis : jQuery
Démonstration : http://www.csslab.cl/ejemplos/timelinr/latest/horizontal.html
Licence : libre

Commentaires