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

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é.

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.

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 ?