Joyride - Créez un tour de présentation des fonctions de votre site

Joyride est un plugin jQuery permettant de créer facilement une visite interactive des fonctionnalités de son site sous forme de bulles d'infos.

Il peut être intéressant lorsque vous développez un site ou un outil web d'expliquer à vos visiteurs comment bien utiliser le site ou tout simplement expliquer ce qu'ils pourront trouver sur ce dernier.

Zurb.com nous propose cette fois-ci un plugin jQuery permettant de créer votre "Tour" interactif.

Comment ça marche ?

Dans un premier temps, il faut définir une liste ol permettant de définir le contenu des bulles de la présentation ainsi que leur ordre:

  <ol id="joyRideContent">
    <li data-id="intro" data-text="Suivant: Ma feature 1">
      <p>Une super intro présentant le tour et le site.</p>
    </li>
    <li data-id="feature1" data-text="Suivant: Ma feature 2">
      <p>Description de la feature 1.</p>

    </li>
    <li data-id="feature2" data-text="Suivant: Ma dernière feature">
      <p>Description de la feature 2.</p>
    </li>
    <li data-id="lastfeature" data-text="Fermer">
      <h2>Dernière feature</h2>
      <p>Pour finir, description texte riche ...</p>
      <p>Il est évidemment possible de mettre en forme les bulles en HTML /CSS</p>
    </li>
  </ol>

Une fois vos bulles d'infos déclarées, il faut bien veiller à ce que leur data-id pointe sur un élément HTML portant cet ID.

Les bulles du tour seront affichées juste en dessous de l'élément sur lequel elles pointent.

La propriété data-text sert à définir le texte du bouton permettant d'aller à la prochaine bulle ou quitter le tour.

Une fois le HTML prêt, il ne nous reste plus qu'à initialiser le plugin et lui renseigner ou non les options qu'il propose:

$(window).load(function() {
  $(this).joyride({
    'tipLocation': 'bottom',       // 'top' or 'bottom' in relation to parent
    'scrollSpeed': 300,            // Page scrolling speed in ms
    'timer': 2000,                 // 0 = off, all other numbers = time(ms) 
    'startTimerOnClick': true,     // true/false to start timer on first click
    'nextButton': true,            // true/false for next button visibility
    'tipAnimation': 'pop',         // 'pop' or 'fade' in each tip
    'tipAnimationFadeSpeed': 300,  // if 'fade'- speed in ms of transition
    'cookieMonster': true,         // true/false for whether cookies are used
    'cookieName': JoyRide,         // choose your own cookie name
    'cookieDomain': false,         // set to false or yoursite.com
    'tipContainer': body,          // Where the tip be attached if not inline
    'inline': false,               // true/false for inline positioning
    'tipContent': #joyRideContent  // The ID of the <ol> used for content
  }); 
});

Voilà, votre tour de site est prêt !

Il ne vous restera plus qu'à donner du style à vos bulles, ou reprendre le style proposé avec le plugin.

Site Officiel