Fotorama, une galerie photo jQuery fluide et personnalisable

11 mars 2012

Fotorama est un plugin jQuery qui permet de réaliser une galerie d’images compatible multi-navigateurs, notamment avec les terminaux mobiles. Le diaporama est complet et facilement personnalisable grâce à de nombreuses options.

Un slideshow complet

Fotorama propose une interface sobre et intuitive avec une navigation à travers les photos très fluide. Les nombreux paramètres permettent de personnaliser votre galerie comme vous le souhaitez : vitesse de transition entre deux slides, lecture automatique et boucle infinie, affichage des miniatures ou puces, redimensionnement automatique en fonction de l’image, personnalisation du ratio des images, mode « swipe » pour les smartphones, mode « fullscreen », compatibilité avec Fancybox, positionnement personnalisé des miniatures, préchargement des images, etc. Bref, Fotorama est complet !

Vous retrouverez pas moins d’une quarantaine options, quelques fonctions de callback et une API. Il existe même un plugin Fotorama dédié à WordPress pour installer le slideshow directement sur votre blog. Voici quelques paramètres :

  • loop : booléen (par défaut à false) qui définit l’activation de la boucle infinie du diaporama, c’est-à-dire qu’après l’affichage de la dernière diapositive, on retourne à la première, et ainsi de suite. Voir l’exemple.
  • navPosition : string (par défaut à auto) qui définit la position des miniatures ou des puces par rapport au slideshow. Les valeurs possibles sont bottom ou top pour le mode horizontal, left ou right pour le mode vertical. Voir l’exemple.
  • flexible : booléen (par défaut à false) qui définit l’activation du redimensionnement du slideshow en fonction de la taille de l’image courante. Voir l’exemple.
  • autoplay : booléen ou entier (par défaut à false) qui définit l’activation de la lecture automatique du diaporama et la durée entre deux diapositives. Par défaut, si la valeur est à true, la durée est de 5 secondes. Voir l’exemple.

Installation de Fotorama

La mise en place est relativement simple. Comme d’habitude, on commence par inclure le framework jQuery et le pugin Fotorama (JS et feuille de style).

<script src="jquery-1.7.1.min.js"></script>
<link href="fotorama.css" rel="stylesheet">
<script src="fotorama.js"></script>

Puis on définit la structure HTML qui va accueillir notre galerie d’images. Vous pouvez mettre des images de taille différente. Par défaut, Fotorama se base sur les dimensions de la première image pour redimensionner proportionnellement les autres.

<div id="fotorama">
  <img src="1.jpg">
  <img src="2.jpg">
  <img src="3.jpg">
</div>

On termine par l’appel de Fotorama (ici, deux paramètres sont utilisés). Et c’est terminé.

$('#fotorama').fotorama({
  width: 700,
  height: 467
});

Fotorama est donc un plugin jQuery très pratique pour mettre en place rapidement une galerie d’images personnalisée. Attention tout de même à la licence qui permet d’utiliser librement le diaporama sur des sites personnels, mais qui vous oblige à obtenir l’approbation explicite de l’auteur pour une utilisation en entreprise.

Requis : jQuery
Compatibilité : Firefox, Chrome, Opera, IE6+, Safari, Android, iOS
Démonstration : http://fotoramajs.com/
Licence : Libre ou avec approbation de l’auteur

Commentaires

  • Welcominh

    Petite question, comment les miniatures de la barre de navigation sont elles générées ? Le plugin pré-téléchargerait donc les images pour les redimensionner ? D’où l’éventuelle question performances…

    • Exact ! Pour optimiser au maximum, tu peux créer tes propres miniatures. Tu passes en source les thumbnails, et en href les images du slideshow : http://fotoramajs.com/install/

      • Welcominh

        Ah ok dac, ca ne pose pas de souci donc.
        J’ai testé sur la page de démo. Je n’arrive pas à lui trouver de défaut particulier.
        D’où le « GG Pierrinho, bonne trouvaille ! continue comme ca ! Change rien. Reste en…euh voila ! »

  • Rien à redire, ca fonctionne bien :)

  • Crousticho

    Je n’arrive pas à l’intégrer dans une page qui comporte déjà d’autre scripts jQuery, il y a sans doute un conflit mais je ne sais pas comment utiliser jQuery no conflict

  • Dédé

    Bonjour!

    Petite question : comment on peut afficher la legende/titre de la photo?
    Merci