Galerie FancyBox sans l’outil media

Les outils medias sont-ils indispensables?

Les outils medias permettent une création rapide de galerie, avec l'écriture automatique d'un shortcode, mais cela ne compense pas la gestion calamiteuse des dossiers d'images, ni l'impossibilité de modifier une galerie sans la recréer complètement. On peut donc choisir de s'exonérer complètement de leur utilisation moyennant un peu d'organisation et de rigueur.

Au sommaire de ce post: l'affichage d'une image, puis d'une galerie, puis de plusieurs galeries sur la même page, et tout cela sans l'utilisation des outils médias de WordPress.

Affichage automatique d'une image FancyBox

Préambule: affichage sans l'outil media. Sous WordPress, il existe deux façons d'afficher des images, soit en écrivant directement le code HTML correspondant dans l'éditeur, soit en utilisant l'outil media de WordPress. FancyBox peut fonctionner avec l'une ou l'autre méthode. Dans ce post, nous allons nous concentrer sur la méthode manuelle, un second post sera consacré à l'utilisation de FancyBox avec les outils medias de WordPress.

Il s'agit de déclencher automatiquement une FancyBox pour toute image portant l'extension, jpg, jpeg, png ou gif. Ci-dessous, le code html générant l'affichage de la vignette, puis le code javascript ouvrant la FancyBox.

Une image, Code html: principe

<!--A chaque fois qu'une image aura pour extension, jpg, png, jpeg ou gif,-->
<!--le click sur image_thumbnail.jpg ouvrira Fancybox avec image.jpg, le titre sera affiché-->
<a href="image.jpg" title="Mon Titre"><img src="image_thumbnail.jpg" /></a>

Une image: Code Javascript à placer dans lightbox.js

(function($) {
  // Initialise FancyBox automatiquement, à chaque fois que dans un lien:
  // l'image de destination aura pour extension, jpg, png, jpeg ou gif
     $("a.fancybox[href$='.jpg'], a.fancybox[href$='.png'], a.fancybox[href$='.jpeg'], a.fancybox[href$='.gif']").fancybox({                                                                                                   
                        // ci-dessous paramètres totalement optionnels  
                   openEffect  : 'fade',  //ouverture en fondu
                  closeEffect  : 'fade', //fermeture en fondu
                   closeClick   :  true  // fermeture autorisée par click sur l'image    
                });                
})( jQuery );                  

Une image: Exemple et Résultat

Clickez moi...Cognassier du Japon
<a href= "wp-content/uploads/fancybox/galerie/picture1.jpg" class="fancybox" title="Cognassier du Japon" >
<img src="wp-content/uploads/fancybox/galerie/thumbs/picture1-th.jpg" alt="Cognassier du Japon" width="120" height="90" class="gal" >
</a>

Quelques remarques:

  • Code html: l'attribut "title" du lien est automatiquement récupéré pour afficher le titre dans la FancyBox. La "class fancybox" du lien n'est pas obligatoire dans ce contexte, mais elle me permet de différencier les images qui seront prises en charge par FancyBox et les autres. On peut styler la vignette en lui attribuant une classe, ici la class css "gal" permet un affichage personnalisé, notamment au survol du thumb.
  • Code javascript: on retrouve la class "fancybox" du lien, tout à fait optionnelle, qui ici me sert à discriminer les images "Fancybox" et les autres. Les dernières lignes du code javascript sont totalement optionnelles, il s'agit d'un choix d'affichage personnel.

Affichage d'une Galerie FancyBox

Utilisation de l'attribut "data-mon-attribut"

Il s'agit de déclencher la Galerie FancyBox pour un groupe d'images ayant en commun un attribut. Nombre d'exemples, y compris sur le site de FancyBox font référence à l'attribut de lien "rel". Hors la validation HTML impose d'utiliser cet attribut pour ce qu'il est, c'est à dire, un attribut qui définit "la nature de la relation établie entre deux ressources". Voir Alsacréations. Par bonheur, il existe depuis HTML5 une forme d'attribut "data-*" facilement utilisable. La partie * est personnalisable, voir: Alsacréations. Cet attribut est un précieux allié lorsqu'il s'agit de communiquer à Jquery Fancybox des paramètres importants, tout en respectant la validation HTML.

Utilisation générale de l'attribut data-*:

Déclarée en html, la valeur de l'attribut "data-mon-attribut" peut être facilement récupérée et utilisée en Javascript mais aussi, merveille des merveilles, en CSS: Voir sur MDN

Fancybox reconnait automatiquement l'attribut data-fancybox-group: Voir la démo Simple image gallery, code source à analyser...

Mise en place de la galerie

Une Galerie, Code HTML: principe

<!-- Fancy box reconnait les images comme appartenant à une même galerie
lorsque la valeur de l'attribut data-fancybox-group est la même pour toutes les images-->
<a href="image1.jpg" data-fancybox-group="gallery" class="fancybox" title="titre 1">
<img src="image1_thumb.jpg"/></a>
<a href="image2.jpg" data-fancybox-group="gallery" class="fancybox" title="titre 2">
<img src="image2_thumb.jpg"/></a>
<a href="image3.jpg" data-fancybox-group="gallery" class="fancybox" title="titre 3">
<img src="image3_thumb.jpg"/></a>

Une Galerie: Code Javascript remplaçant le précédent, à placer dans lightbox.js

(function($) {
  // Initialise FancyBox automatiquement pour les images jpg, jpeg, png, gif
  // Si on utilise l'attribut de lien data-fancybox-group, Fancybox reconnait une galerie,
  // code identique à celui d'une image seule à quelques paramètrages optionnels près
     $("a.fancybox[href$='.jpg'], a.fancybox[href$='.png'], a.fancybox[href$='.jpeg'], a.fancybox[href$='.gif']").fancybox({                                                                                                   
                        // ci-dessous paramètres totalement optionnels
                           loop     :  false,       // Pour éviter que la galerie ne boucle sur elle-même
                   openEffect  : 'fade',      // ouverture en fondu
                  closeEffect  : 'elastic',  // fermeture élastique
                   closeClick   :  true,     // fermeture autorisée par click sur l'image      
                   prevEffect   : 'fade',  // passage d'une image à l'autre en fondu
                   nextEffect   : 'fade', // passage d'une image à l'autre en fondu      
                });  
                   
})( jQuery );                  

Une Galerie: Exemple et Résultat

Cognassier du JaponCognassier du JaponCognassier du JaponCognassier du Japon

Code HTML compatible FancyBox

<a href= "wp-content/uploads/fancybox/galerie/picture1.jpg" data-fancybox-group="gallery" class="fancybox" title="Cognassier du Japon" >
<img src="wp-content/uploads/fancybox/galerie/thumbs/picture1-th.jpg" alt="Cognassier du Japon" width="120" height="90" class="gal left" ></a>
<a href= "wp-content/uploads/fancybox/galerie/picture2.jpg" data-fancybox-group="gallery" class="fancybox" title="A la croisée des branches" >
<img src="wp-content/uploads/fancybox/galerie/thumbs/picture2-th.jpg" alt="Cognassier du Japon" width="120" height="90" class="gal left" ></a>
<a href= "wp-content/uploads/fancybox/galerie/picture3.jpg" data-fancybox-group="gallery" class="fancybox" title="Du rose et du gris" >
<img src="wp-content/uploads/fancybox/galerie/thumbs/picture3-th.jpg" alt="Cognassier du Japon" width="120" height="90" class="gal left" ></a>
<a href= "wp-content/uploads/fancybox/galerie/picture4.jpg" data-fancybox-group="gallery" class="fancybox" title="Intimité" >
<img src="wp-content/uploads/fancybox/galerie/thumbs/picture4-th.jpg" alt="Cognassier du Japon" width="120" height="90" class="gal left" ></a>

Affichage de plusieurs Galeries FancyBox

Et si l'on souhaite afficher plusieurs galeries sur une même page? Pas de souci il suffit d'ajouter un index différent à la valeur de l'attribut data-fancybox-group pour chacune des galeries et ainsi les différencier les unes des autres et séparer leur affichage.

1ère galerie: data-fancybox-group="gallery1"

Click pour voir en grand

2ème galerie: data-fancybox-group="gallery2"

Click pour voir en grand

Pour aller plus loin

Pour aller plus loin, découvrir les paramétrages possibles pour FancyBox et toutes les utilisations envisageables, rendez-vous sur le site de l'application: FancyBox.

Pour éviter l'écriture fastidieuse du code lors de la création manuelle des galeries, il suffit de prévoir une petite fonction maison, appelée par un shortcode, qui réalisera une galerie en quelques secondes. Les images préparées et classées au préalable, ce sera la seule contrainte, seront ainsi très faciles à retrouver et les galeries très simples à modifier.

Pour utiliser FancyBox avec une galerie WordPress, c'est ici


Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*
*
Site web