Timelinr – Une frise chronologique dynamique en JQuery
Le plugin JQuery Timelinr vous permet de créer des sliders dynamiques afin d’associer des dates à du contenu. Il est très simple à mettre en oeuvre et assez sympathique visuellement. Il y a des effets de transition entre chaque date ainsi qu’un effet de zoom sur l’image associée. Vous pouvez à peut prêt tout régler comme par exemple l’orientation de la frise.
En premier lieu il faut inclure le plugin ainsi que JQuery :
Du côté html, il faut déclarer les différentes dates dans une liste avec id= »dates » sous forme de lien vers « #laDateEnQuestion« .
Ensuite vient une autre liste avec pour chaque item un id qui vaut « LaDateEnQuestion » pour faire le lien avec les dates précédemment déclarées.
À l’intérieur la structure est la suivante : image/titre/texte. A la fin de la div « timeline » il s’agit de déclarer les boutons « suivant » et « précédent ».
Côté options disponibles, vous pouvez éditer les paramètres que voici :
$(function(){
$().timelinr({
orientation: 'horizontal',
// value: horizontal | vertical, default to horizontal
containerDiv: '#timeline',
// value: any HTML tag or #id, default to #timeline
datesDiv: '#dates',
// value: any HTML tag or #id, default to #dates
datesSelectedClass: 'selected',
// value: any class, default to selected
datesSpeed: 500,
// value: integer between 100 and 1000 (recommended), default to 500 (normal)
issuesDiv : '#issues',
// value: any HTML tag or #id, default to #issues
issuesSelectedClass: 'selected',
// value: any class, default to selected
issuesSpeed: 200,
// value: integer between 100 and 1000 (recommended), default to 200 (fast)
issuesTransparency: 0.2,
// value: integer between 0 and 1 (recommended), default to 0.2
issuesTransparencySpeed: 500,
// value: integer between 100 and 1000 (recommended), default to 500 (normal)
prevButton: '#prev',
// value: any HTML tag or #id, default to #prev
nextButton: '#next'
// value: any HTML tag or #id, default to #next
});
});
Ou plus simplement (si vous ne voulez rien configurer) :
$(function(){
$().timelinr();
});
Un exemple d’utilisation ici : soulierscompagnie.fr
Télécharger Timelinr : jquery.timelinr-0.9.53.js
Télécharger JQuery : jquery-1.7.2.min.js
