Installation de Fancybox: galerie sans plugin

Pour afficher une galerie de photos sous WordPress, avec un effet type "lightbox", classiquement on utilise les outils medias prévus et on ajoute un plugin dédié. Pour échapper au plugin il est tout à fait possible d'utiliser un script Javascript utilisant JQuery. Et si l'on souhaite ne plus utiliser les outils medias de WordPress, la solution du script JQuery sera encore plus simple.

Choix de FancyBox

WP

FancyBox est placée sous licence Creative Commons avec attribution non commerciale 3.0, elle est donc gratuite pour un usage personnel. La procédure d'installation est bien décrite par Bryce Adams sur code.tutsplus. A voir aussi: Le Pingouin des @lpes, pour une traduction en français de la documentation officielle de FancyBox et quelques exemples. Des infos et une vidéo également sur Tutvid

FancyBox permet d'afficher des images clickables, des galeries de photos, des pdf, des vidéos de sites de partage (Dailymotion, Vimeo, Youtube, etc..) mais aussi les vidéos présentes sur votre serveur, au format mp4, et même flv...

Au sommaire de ce post: choix et installation du script FancyBox.

Il existe différents types de scripts, le Le Blog du Web en recense 13 parmi les plus connus, on en trouve d'autres ici. Citons en quelques uns: LightBox2, FancyBox, ColorBox, ThickBox, etc...Mon choix s'est porté sur FancyBox pour sa facilité de mise en œuvre, sa souplesse, ses nombreux paramètres permettant une personnalisation aisée.

Installation de FancyBox en 4 étapes:

  1. Télécharger le script Fancybox: c'est ici
  2. Récupérer les fichiers du dossier source de Fancybox et les organiser, selon leur type:
    1. Créer un répertoire lightbox à la racine de votre thème WordPress.
      fancybox
    2. Y créer un dossier CSS pour le fichier jquery.fancybox.css, un dossier Javascript js pour le fichier jquery.fancybox.pack.js et un dossier images pour recueillir les images téléchargées. Il sera nécessaire d'éditer le fichier jquery.fancybox.css et de modifier l'url des images selon la nouvelle organisation:
      /*Fichier css du dossier lightbox: modification du path pour toutes les images, exemple:*/
      background-image: url('fancybox_sprite.png');
      /*devient:*/
      background-image: url('../images/fancybox_sprite.png');
  3. Charger les fichiers téléchargés au cœur de WordPress: il suffit pour cela d'utiliser la fonction de WordPress enqueue et de quelques lignes de php ajoutées dans votre fichier function.php
    function mon_theme_add_fancybox() {
         
        wp_enqueue_script( 'fancybox',  get_stylesheet_directory_uri() . '/lightbox/js/jquery.fancybox.pack.js', array( 'jquery' ), false, true );
        wp_enqueue_script( 'lightbox',  get_stylesheet_directory_uri() . '/lightbox/js/lightbox.js', array( 'fancybox' ), false, true );
        wp_enqueue_style( 'lightbox-style',  get_stylesheet_directory_uri() . '/lightbox/css/jquery.fancybox.css' );          
    }
    add_action( 'wp_enqueue_scripts', 'mon_theme_add_fancybox' );
    Remplacez "mon_theme" par le nom de votre thème et les deux scripts javascript fancybox.pack.js et lightbox.js ainsi que le fichier css jquery.fancybox.css seront pris en compte par WordPress
  4. Créer un fichier lightbox.js: il sera placé dans le dossier js précédemment créé. Il contiendra un code javascript qui servira à initialiser Fancybox selon l'utilisation choisie: voir ci-dessous.

Une fois l'installation terminée, il s'agit de préparer l'affichage:


Laisser un commentaire

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

*
*
Site web