Orbit Plugin


Suivez le guide !

Orbit Plugin


Orbit plugin est un Jquery permettant d'intégrer une galerie d'images sous forme de slideshow sur votre site.

Suivez le guide ! Description et informations générales

Cette galerie vous permettra de faire défiler vos images soit manuellement grâce aux flèches, soit automatiquement avec la fonction diaporama située en haut à droite de la galerie. Vous pouvez également ajouter du texte dans vos images.

Auteur : Zurb
Source : www.zurb.com
Date de réalisation : 17 Mars 2011




Suivez le guide ! Exemple

Voici un premier exemple. Vous pouvez noter la présence du timer en haut à gauche qui vous permet de mettre en pause et de relancer la lecture.

Ici, les deux flèches de navigation manuelles ont été désactivées.


Dans ce deuxième exemple, le timer est désactivé. La navigation est manuelle avec les deux flèches de chaque côté de l'image.

Nous utilisons aussi les bullets (les billes en bas de l'image) qui vous affiche l'image en cours et permet de sauter directement à une image.


Overflow: Hidden No More Overflow: Hidden No More HTML Captions HTML Captions HTML Captions Overflow: Hidden No More



Suivez le guide ! Mise en place

Ce plug-in est très riche et possède de nombreux paramètres que nous allons détailler ci-dessous :

Comme toujours, nous commençons par ajouter la librarie Jquery ainsi que le plug-in jquery Orbit à notre page :

  1. <script src="Orbit/script/jquery.js" type="text/javascript"></script> <!--  A télécharger sur Jquery.com -->
  2. <script src="Orbit/script/jquery.orbit.js" type="text/javascript"></script>

Puis le css pour permettre la mise en forme de notre slideshow :

  1. <link href="Orbit/css/orbit.css" rel="stylesheet" type="text/css" />

Le code source se compose d'une division et de la liste des images qui composent le slideshow :

  1. <div id="slideshow">
  2.   <img src="Orbit/images/nature_mesange.jpg" alt="Deux mésanges" width="600" height="375" />
  3.   <img src="Orbit/images/nature_papillon.jpg" alt="Un papilon" width="600" height="375" />
  4.   <img src="Orbit/images/nature_tortue.jpg"  alt="Une belle tortue" width="600" height="375" />
  5.   <img src="Orbit/images/nature_guepe.jpg"  alt="Attention une guèpe !" width="600" height="375"  />
  6.   <img src="Orbit/images/nature_aigle.jpg"  alt="Un faucon" width="600" height="375"  /> 
  7.   <img src="Orbit/images/nature_grenouille.jpg" alt="Une grenouille" width="600" height="375" />
  8. </div>

Pour pouvoir lancer le plug-in, nous devons indiquer dans le javascript le nom de la division contenant nos images. Si l'on reprend le nom que l'on a utilisé dans le code ci-dessus.

Notez qu'Orbit déterminera lui-même la taille des images que vous lui fournissez et se redimensionnera en conséquence. Assurez-vous donc d'avoir toujours la même taille pour vos images !

  1. $(window).load(function() {
  2.   $('#slideshow').orbit({
  3.     "animation" : "fade",
  4.   });
  5. });

Une fois mis en place, vous voilà prêt à lancer le plug-in !

 

Suivez le guide ! Configuration

Avec le code ci-dessus, le plug-in fonctionnera déjà parfaitement ! Mais il existe de très nombreux paramètres que vous pouvez modifier.

Commençons par jeter un oeil au paramètre par défauts. Si vous Regardez dans le fichier javascript d'orbit :


  1. (function($) {
  2.     $.fn.orbit = function(options) {
  3.     //Voici les options par défaut
  4.     var defaults = {  
  5.     animation: 'fade',      // Direction du défilement: fade, horizontal-slide, vertical-slide, horizontal-push
  6.     animationSpeed: 800,    // vitesse des animations
  7.     timer: false,     // Activer (true) ou désactiver (false) le timer
  8.     advanceSpeed: 4000,     // Si le timer est activé, définit le temps d'attente entre 2 transitions
  9.     pauseOnHover: false,    // Fige le défilement lorsque la souris survole l'image
  10.     startClockOnMouseOut: false,  // Indique si le timer se lance lorsque la sourie quitte l'image
  11.     startClockOnMouseOutAfter: 1000,  // Milliseconde d'attente avec la relance du timer
  12.     directionalNav: true,   // Permet d'activer ou désactiver les flèches
  13.     captions: true,       // Permet d'activer les légendes
  14.     captionAnimation: 'fade',     // Effet de transition des légendes : fade, slideOpen, none
  15.     captionAnimationSpeed: 800,   // Vitesse de l'animation des légendes
  16.     bullets: false,     // True ou False pour activer les billes de navigation
  17.     bulletThumbs: false,    // True ou False si vous utilisez des miniatures au lieu des billes
  18.     bulletThumbLocation: '',    // Emplacement des miniatures
  19.     afterSlideChange: function(){}  // Fonction vide
  20. };

Vous pouvez bien sur modifier tout ces paramètres comme bon vous semble. Pour cela, vous devrez les préciser lorsque vous activer le plug-in.

Voici un exemple :

  1. $(window).load(function() {
  2.   $('#slideshow2').orbit({
  3.     "animation" : "vertical-slide",
  4.     "bullets": true,   
  5.     "timer": false
  6.   });
  7. });

Ce code correspond au second exemple. Nous avons activé l'effet de transition vertical, activé les billes et désactivé le timer. Vous pouvez de la même manière que nous avons procédé activer et modifier tous les paramètres par défaut.

 

Légendes :

Orbit permet aussi l'ajout de légende comme nous l'avons fait dans le premier exemple. Pour cela, il vous faudra préciser le paramètre « data-caption » pour chaque image que vous souhaitez commenter :

  1. <div id="featured">
  2.   <img src="Orbit/images/grece.jpg" alt="Overflow: N'est plus caché" width="800" height="450" data-caption="#legende1" />
  3.   <img src="Orbit/images/grece_2.jpg" alt="Overflow: N 'est plus caché" width="800" height="450"  data-caption="#legende2"/>
  4.   <img src="Orbit/images/jellyfish.jpg" alt="Overflow: N 'est plus caché" width="800" height="450" data-caption="#legende3"/>
  5.   <img src="Orbit/images/sunset.jpg"  alt="Overflow: N 'est plus caché" width="800" height="450" data-caption="#legende4" />
  6.   <img src="Orbit/images/see.jpg"  alt="Overflow: N 'est plus caché" width="800" height="450" data-caption="#legende5" /> 
  7.   <img src="Orbit/images/eifel_tower.jpg"  alt="Overflow: N 'est plus caché" width="800" height="450" data-caption="#legende6" />                     
  8.   <!-- Légendes des images -->
  9.   <span class="orbit-caption" id="legende1"><strong>Bienvenue en Grêce !</strong></span>
  10.   <span class="orbit-caption" id="legende2">Je supporte tous les types de texte : <em>italic</em>, <strong>gras</strong> tant qu 'ils sont valides en HTML !</span>
  11.   <span class="orbit-caption" id="legende3"><a href="#">Voici un lien HTML</a>.</span>
  12.   <span class="orbit-caption" id="legende4">Vous pouvez mélanger les genres et afficher ce qu 'il vous plait !</span>
  13.   <span class="orbit-caption" id="legende5">Belle vue ! N 'est-ce pas ?</span>
  14.   <span class="orbit-caption" id="legende6">Une splendide photo de la tour Eiffel de nuit.</span>                    
  15. </div>

Puis vous devrez donner les légendes juste en dessous en précisant comme ID le nom passé dans le « data-caption ». Vous pouvez y entrer n'importe quel texte du moment que celui-ci est valide en HTML.

 

Contenu :

Enfin, Orbit permet aussi de gèrer du contenu et du texte. Pour cela, vous devrez préciser celui-ci dans une division de contenu comme dans l'exemple ci-dessous.

  1. <div id="featured">
  2.   <div class="content" style="">
  3.     <h1>Woa ! Orbit gère même du contenu !</h1>
  4.     <h3>Regardez ! Je suis un texte !</h3>
  5.   </div>
  6.   <img src="image1.jpg" alt="ma 1ere image" />
  7.   <img src="image2.jpg"  alt="ma 2ème image" />
  8.   <img src="image3.jpg" alt="et encore une..."  />
  9. </div>

En revanche pour que l'image s'affiche sous le texte correctement, vous devrez préciser dans le CSS, l'emplacement de l'image qu'il faudra charger :

  1. /* L'emplacement des images doit être précisé dans le CSS si vous utilisez du contenu */
  2. .content {
  3.   background: url(emplacement/dossier/image/image_1.jpg);
  4. }

Si vous ne donnez pas d'instruction au niveau de l'image, ce sera alors la dernière image de votre slideshow qui sera utilisée.

 

Vous connaissez maintenant toutes les fonctions d'Orbit !