jQuery : FancyBox V3 BETA
695 1 J'aime !

jQuery : FancyBox V3 BETA

Publié par Yann GROSYEUX

Mardi : so Fancy ! Coup de projecteur sur un plugin jQuery indispensable pour présenter de manière élégante aussi bien vos galeries photos, que vos vidéos ou iframe.

FancyBox a évolué dans une troisième mouture pour se frotter à nos problématiques actuelles : adaptabilité et mobilité.

 

Contexte

E-Commerce ou blog, tous les sites ont besoin de présenter des photos de manière élégante, en prenant en compte les aspects de mobilité. Ça peut se gérer de plusieurs façons, mais l’une des plus fréquentes reste la « Lightbox », soit la mise en valeur d’un objet HTML – image, vidéo, iframe – dans un container central à la page, pourvu d’un overlay pour capter l’attention de l’internaute sur l’élément principal.

 

Il existe pléthore de lightbox, qu’elles reposent sur un framework ou pas. FancyBox existe depuis des années, permettant de répondre à ce besoin.

 

La version 2 de FancyBox, bien que pourvue d’indéniables qualités, avait pris du retard sur la concurrence : mobilité, utilisation de la molette, traduction des textes. Effectivement, une galerie en lightbox c’est sympa, mais si les boutons de changement d’image s’affichent lors du survol de celle-ci, ce n’est pas terrible sur un smartphone ou une tablette : pire, ça casse la navigation et l’envie de poursuivre.

 

FancyBox évolue donc vers un bien meilleur support des périphériques mobiles (slide pour changer d'image, double tapotage pour zoomer) dans cette version 3, qui reste pour le moment à l’état de version BETA. Pour l’utiliser au quotidien, elle est très stable et ne présente pas de dysfonctionnement.

 

Cette version se dote également de deux nouveaux thèmes d’affichage (dark / light), supporte le multilingue, et un démarrage automatique.

 

fancybox-v3-lightbox-light-theme-01

Thème Light – FancyBox V3

 

fancybox-v3-lightbox-dark-theme-02

Thème Dark – FancyBox V3

 

Elle simplifie également la structure HTML sur laquelle elle repose, pour une amélioration significative des performances lors des transitions entre images. Enfin, une fonctionnalité d’ajout / suppression à la volée d’images permet d’interagir avec la galerie.

 

Mise en œuvre

HTML

Les images à afficher doivent être incluses dans des balises de lien. Suivant le besoin, on précisera via l’attribut rel (ou l’attribut data-fancybox-group pour être HTML5 compliant), l’identifiant de la ou les galeries. Il n’y a en effet aucune contre-indication à gérer plusieurs galeries dans la même page laughing.

 

Ex :

<div class="imglist">
  <a data-fancybox-group="single_1" href="/fancybox/beta/data/1_b.jpg" title="Caption: <b>outside</b>; Animation: <b>elastic</b>">
    <img alt="ma miniature" src="/fancybox/beta/data/1_s.jpg">
  </a>
  ...
</div>

 

Quelques remarques sur la structure :

  • La légende de l’image est positionnée dans l’attribut title du lien. Elle peut intégrer du HTML
  • La source de l’image et du lien peuvent être différentes (et c’est même recommandé !) afin d’alléger le poids de la page. On présente une miniature pour l’image, et l’image originale dans le lien
  • L’attribut data-fancybox-group du lien permet de spécifier la galerie dans laquelle l’image figurera

 

CSS

Pour la partie style, il est nécessaire d’inclure la feuille de style FancyBox (jquery.fancybox.css).

Si vous souhaitez utiliser l’affichage des miniatures dans la lightbox, il faudra également inclure la feuille de style dédiée (jquery.fancybox-thumbs.css).

 

JAVASCRIPT

Rappelons que c’est un plugin jQuery (donc n’oublie pas d’inclure le core de jQuery tongue-out ). Le plugin est compatible à partir de la version 1.8.3. FancyBox Beta V3 est disponible en téléchargement ici : http://fancyapps.com/fancybox/beta/jquery.fancybox-v3beta.zip

 

Les démos de cette nouvelle version sont disponibles sur : http://fancyapps.com/fancybox/beta/.

 

Pour la partie Javascript :

$(function() {
  $("[data-fancybox-group='theme_1']").fancybox();
});

 

N’oubliez pas de changer « theme_1 » ! Il désigne l’identifiant de la galerie dans laquelle les images sont positionnées (et donc la valeur de l’attribut data-fancybox-group indiqué sur les liens).  

 

Pour afficher les miniatures dans la lightbox, il sera nécessaire d’inclure également le fichier jquery.fancybox-thumbs.js.

 

fancybox-v3-lightbox-thumbnails-03

Affichage des miniatures – FancyBox V3

 

Pourquoi toutes les fonctions ne sont pas dans le même script ? Pour alléger le plugin si on ne souhaite pas toutes les fonctionnalités wink

 

Pour afficher les miniatures, utilisez le script suivant :

$(function() {
  $("[rel='fancybox-thumb']").fancybox({
    helpers : {
      thumbs : true
    }
  });
});

 

Comme tout bon plugin jQuery, plusieurs options sont disponibles, n’hésitez donc pas à y jeter un coup d’œil dans le fichier JS (lignes 97 à 275) smile

 

La plupart de ces options sont clairement documentées pour la version 2 : http://fancyapps.com/fancybox/#docs

 

Des callbacks sont gérés pour les évènements suivants :

  • Annulation
  • Avant chargement
  • Après chargement
  • Avant affichage
  • Après affichage
  • Avant fermeture
  • Après fermeture

 

Dans le cas d’une utilisation pour une iframe, ou via un chargement AJAX, pensez à indiquer dans le lien les attributs :

  • data-fancybox-href="url" où url correspond à votre URL appelée
  • data-fancybox-type="iframe"

 

Enfin, le plugin est disponible en licence CreativeCommons 3.0, pour un usage non commercial.

 

Enjoy ! laughing

Un commentaire ? Réagissez !