Ajouter l’effet FancyBox sous WordPress de façon automatique sur vos images et galeries

fancyBox est un script qui offre une façon agréable et élégante pour ajouter des fonctionnalités de zoom sur les images, le contenu HTML et multimédia de vos pages Web. Facile d’utilisation et basé sur jQuery, fancyBox peut s’appliquer automatiquement sur toutes vos photos d’articles sous WordPress en suivant ce tutoriel.

Constat initial

Les galeries WordPress

Les galeries par défaut de WordPress ne sont guère très élégantes comme en témoigne cet article sur les 10 ans de WordPress. Elles affichent des vignettes en taille miniature sur un nombre de colonnes prédéterminé.

Galerie par défaut sous WordPress
Galerie par défaut sous WordPress

De fait, cet affichage ne permet pas une visualisation efficace de vos images alors même que le réflexe courant d’un internaute consistera à cliquer sur l’une d’elle pour obtenir une version plein écran.

L’affichage classique d’images

Lorsque vous insérez une image dans un article, vous avez la possibilité de créer un lien vers le média dans son entier. Là encore, cela n’est guère très ergonomique car l’utilisateur quitte la page en cours de visite. fancyBox nous permet de le conserver sur la même page !

La solution proposée

C’est là tout l’intérêt d’appliquer automatiquement un effet fancyBox pour un affichage en surimpression dont voici un lien vers le site de démonstration et une capture d’écran de l’effet obtenu. Par analogie, on parle aussi d’effet Lightbox qui est similaire mais moins puissant.

Affichage en sur-impression après un clic sur la vignette de la galerie

Pour les utilisateurs débutants, je vous recommande la solution plugin via cet ancien tutoriel toujours valable.

Intégrer fancyBox sur vos images par détection automatique

Pré-requis – Télécharger fancyBox

Gratuit dans un usage non commercial, il vous faudra payer une petite contribution pour un usage professionnel. Vous pouvez le télécharger à partir du lien ci-après :

L’archive contient notamment le dossier /source dans lequel nous récupérerons les fichiers souhaités – tous ne sont pas utiles pour notre tutoriel.

Étape n°1 – Ajout du JavaScript / CSS pour fancybox

WordPress ne propose pas nativement dans sa liste de scripts le fameux fancyBox.

De fait, il nous faut charger le JS et la CSS dans votre thème de façon propre.

Pour ce faire, éditez votre fichier functions.php ou celui adéquat – les créateurs de thèmes préfèrent généralement inclure les scripts dans un fichier dédié ce qui est bien plus pratique, et collez les lignes de code suivantes. Il est d’ailleurs préférable d’identifier au préalable la façon dont votre thème charge ses scripts afin de rajouter les lignes wp_register_style, wp_register_script, enqueue_script et enqueue_style directement dans les fonctions PHP natives de ce dernier.

Elles vont charger 2 fichiers à l’affichage d’un article. Vous pouvez supprimer cette condition mais étant donné que les galeries n’ont pas vocation à être utilisées dans des pages, il est inutile de charger des scripts sur l’intégralité du site. De même, si vous utilisez les galeries sur des types de contenu personnalisé, il vous faudra adapter la condition.

function wpc_js() {
	
	wp_register_style('fancybox-css', get_template_directory_uri() . '/inc/css/fancybox.css', array(), '1.0', 'all');

	wp_register_script('fancybox', get_template_directory_uri().'/inc/js/jquery.fancybox.pack.js', 'jquery', '1.0', true);
	
	if (is_single()) {
		wp_enqueue_script('fancybox');
		wp_enqueue_style('fancybox-css');
	}
}

add_action('wp_enqueue_scripts', 'wpc_js');

Dans mon exemple, les fichiers sont placés dans un répertoire /inc/ contenant 2 sous-répertoires /js et /css.

Étape n°2 – Appel du script

La deuxième étape consiste à charger le script qui appliquera l’effet sur les images de manière automatique. Il existe plusieurs techniques pour cela.

Soit en créant un fichier JS sur-mesure dans lequel vous ajouterez le code ci-dessous situé entre les balises <script>, soit en créant une fonction PHP qui ira injecter le script directement le pied de page de vos articles. C’est cette seconde méthode que je propose ici.

Le script va détecter automatiquement les liens sur les images et leur appliquer les bonnes classes CSS nécessaires pour appliquer l’effet.

/* Insertion du Fancybox sur les contenus */
function wpc_auto_fancy_box() {
	if (is_singular('post')) { ?>
	    <script>
	    jQuery(document).ready(function(){
	        jQuery(".post_content").find("a:has(img)").addClass('fancybox');
			jQuery(".post_content").find("a:has(img)").attr('rel','group1');
        	        jQuery(".fancybox").fancybox( {
					fitToView	: true,
					autoSize	: true,
					autoHeight	: true,
					closeClick	: false,
					openEffect	: 'none',
					closeEffect	: 'none',
					padding			: 10,
					helpers		: {
						title	: { type : 'float' },
						buttons	: {}
					}
				} );
	        jQuery("a.group").fancybox({'transitionIn':'elastic','transitionOut':'elastic','speedIn':600,'speedOut':200,'overlayShow':false});
	    });
	    </script>
<?php } }

add_action('wp_footer','wpc_auto_fancy_box');

Pour faire fonctionner le script, vous devez impérativement modifier la classe CSS .post_content par celle de votre thème. Elle correspond au conteneur de votre article. Utilisez les outils de développement de votre navigateur pour l’identifier ou en analysant le code source du thème.

Il existe de nombreuses variantes en matière d’affichage de la pop-up fancyBox. Pour cela, je vous invite à lire en détails la documentation officielle (en anglais) très complète sur le sujet. Convaincu ?

Crédits photo : Tom Kelly

10 commentaires

  1. lian00

    Bon, je vais peut-être débuter une polémique stérile mais il me semble que Lightbox est l’ancêtre originel et c’est pour ça que l’on parle d’effet « Lightbox » – et c’est la première fois que j’entends parler d' »effet Fancybox ». D’ailleurs le site officiel Fancybox annonce « Fancybox – Fancy jQuery lightbox alternative ». Si c’est bien le cas, écrire  » Par analogie, on parle aussi d’effet Lightbox », c’est carrément ambigu et peut faire croire que Lightbox n’est qu’un succédané de Fancybox – c’est la sensation que j’ai eu en tous les cas et j’ai été obligé d’aller vérifier.
    Ça n’a rien à voir avec l’article et je m’excuse de mettre la zone mais j’aime bien rendre à César ce qui appartient à Brutus.

  2. Jf

    Le soucis quand on crée une galerie, si on ne choisit pas Lier à « Fichier média » par défaut c’est « Page de fichier attaché », l’effet lightbox ne se feras pas. Comment forcer par défaut à « Fichier média » ?

    Merci

  3. Mike

    Bonjour,

    Et tout d’abord merci pour ce site sur lequel je retrouve souvent beaucoup d’informations très intéressantes pour mon développement perso sur wordpress.

    Je remarque sur mes divers sites qu’avec le plugin Easy FancyBox il est tout aussi facile d’appliquer « l’effet fancybox » (ou « Lightbox » pour Lian00) à toutes les photos publiées sur le site. Et cela, sans toutes les modifications de fichiers si bien expliqué dans ce tutoriel.
    Serait-ce du à la mise à jour de WordPress 4.0? Ou autre chose?

  4. Jeremie

    Bonjour L’image s’ouvre deux fois pour ma part, une fois sans effet et une fois dans la fancy box.Du coup il faut fermer 2 images (2 fois la même) pour revenir sur la page. Une idée ? Merci

  5. claude

    il existe aussi le plugin « easy fancy box » qui évite de mettre les mains dans la mécanique (PHP)
    Pour ma part j’ai une question : comment faire pour que la FancyBox (ou ligntbox – appelons là comme bon nous semble) affiche un contenu ajusté à la taille de la fenêtre ? Ça marche sans problèmes avec des images mais dès qu’il s’agit d’un pdf le fichier n’est pas ajusté à la fenêtre…. comment faire ?

Laisser un commentaire