19
AOUT

jQuery Timelinr - Créer un slider de timeline avancé avec jQuery

Publié le 19/08/11 à 09h34 par DJo

jQuery Timelinr est un plugin jQuery permettant de créer une frise chronologique sous forme de slider dynamique.

jQuery Timelinr est un plugin jQuery permettant de créer une frise chronologique sous forme de slider dynamique.

Présenter les dates clés d'un projet, d'une entreprise... sur son site n'est jamais chose aisée.

Grâce à Timelinr, vous aurez la possibilité de créer en quelques lignes de code jQuery un slider dynamique pour associer vos dates à un contenu.

La navigation se fait très facilement entre les dates avec un effet de transition sympa qui donnera tout de suite du style à votre frise chronologique.

jQuery Timelinr - Afficher en mode vertical

Le plugin dispose d'une multitude d'options pour personnaliser votre slider à votre guise, comme l'orientation horizontale ...

$(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
      });
   });

Et côté HTML, il suffit de définir vos contenus et dates associées:

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

 

Sympa non ?

 

Site Officiel

Baraguiné par hiper-tofu le 20/08/11 à 23h09
hiper-tofu sur La Ferme du Web
Cool, simple, utile, plein d'option, Good :).

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web