Ajouter fancybox au thème

Fancybox permet de visualiser les images grand format sans quitter la page. C’est une des librairies pour jquery les plus connues et utilisées.
Il existe plusieurs plugins permettant de l’ajouter àun site en wordpress, mais si on veut avoir la dernière version, autant l’ajouter soi-même.

1) Aller chercher les fichiers sources sur le site de Fancybox

Fancybox est documenté sur le site fancyapps.com. On peut donc y télécharger la version la plus récente.
Deux fichiers nous intéressent, situés dans le sous-dosser "dist" :
jquery.fancybox.min.js et jquery.fancybox.min.css.

On placera ces fichiers dans un dossier "fancybox" créé dans le dossier "js" qui existe déjàdans le thème, pour plus de facilité.

On crée dans la foulée un fichier appelé main.js dans le même dossier javascript.

2) Ajouter les fichiers au thème

L’opération d’ajout de la librairie demande d’ajouter les 3 fichiers dans le code thème.
On pourrait crée un code pour ce faire dans le fichier header.php, mais on va employer la méthode considérée comme plus propre par les développeurs de Wordpress, qui les ajoute àtravers la fonction wp_enqueue_scripts dans le fichier functions.php.

On copiera donc le code ci-dessous dans le fichier functions.php.

/*
ajouter fancybox pour le theme, ainsi que le fichier main.js
*/
function hiremeplease_fancy_scripts() {
    wp_enqueue_script( 'fancybox-script', get_theme_file_uri( '/js/fancybox/jquery.fancybox.min.js' ), array(), '3.3.1', true );
    wp_enqueue_script( 'main-script', get_theme_file_uri( '/js/main.js' ), array(), '1.0', true );
    wp_enqueue_style( 'fancybox-style', get_template_directory_uri() . '/js/fancybox/jquery.fancybox.min.css', array(), '3.3.1', 'all' );
}
add_action( 'wp_enqueue_scripts', 'hiremeplease_fancy_scripts' );

Le code de main.js

Le fichier main.js est utile pour permettre d’ajouter ses propres codes javascript dans le thème. On lui adjoint un code permettant d’activer fancybox :
Ce code active fancybox pour tous les lien présents dans les pages du site qui pointent vers une image.

jQuery(document).ready(function(){
    var fancy_images = 'a[href$=".gif"],a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".GIF"],a[href$=".JPG"],a[href$=".JPEG"],a[href$=".PNG"]';
    jQuery(fancy_images).attr("data-fancybox","gallery").fancybox();
});

Activer automatiquement fancybox dans les posts

Il suffit dès lors, pour utiliser fancybox, d’ajouter des images dans les articles, en faisant bien attention de lier l’image en grand format àl’image affichée dans l’article. Faites donc bien attention, après avoir ajouté l’image, de bien choisir "Média" dans le menu déroulant "Lier à".

Aller plus loin

On peut évidemment personnaliser l’affichage de Fancybox en utilisant les réglages spécifié sur le site de la librairie, par exemple en faisant apparaitre les icones de zoom et de fermeture de de la fenêtre.