Partagez l'article !Share on Facebook0Tweet about this on TwitterShare on Google+0Share on LinkedIn1Pin on Pinterest3Share on StumbleUpon0Share on Tumblr0

veille-javascript-jquery-timelinr-tech-news-fr

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 :

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.timelinr-0.9.53.js"></script>

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”.

<div id="timeline">
   <ul id="dates">
      <li><a href="#2001" class>2011</a></li>
      <li><a href="#2002" class>2002</a></li>
   </ul>
   <ul id="issues">
      <li id="2001">
         <img src="">
         <h1>2001</h1>
         <p>La description de la date 2001</p>
      </li>
 
      <li id="2002">
         <img src="">
         <h1>2002</h1>
         <p>La description de la date 2002</p>
      </li>						
   </ul>
   <div id="grad_left"></div>
   <div id="grad_right"></div>
   <a href="#" id="next">+</a><!-- optional -->
   <a href="#" id="prev">-</a><!-- optional -->
</div>

Côté options disponibles, vous pouvez éditer les paramètres que voici :

?View Code JAVASCRIPT
$(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) :

?View Code JAVASCRIPT
$(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

Partagez l'article !Share on Facebook0Tweet about this on TwitterShare on Google+0Share on LinkedIn1Pin on Pinterest3Share on StumbleUpon0Share on Tumblr0