Ajouter une lightbox /
à toute vos images sur WordPress

25/01/2015

Dans cet article apprenez comment ajouter une lightbox à toutes les images de votre contenu sur Wordpress et cela sans plugin. Pour suivre ce tutoriel vous allez avoir besoin de quelques connaissances en JavaScript (Jquery).

Qu’est ce qu’une LightBox ? / Pourquoi l’utiliser ?

Une Lighbox est souvent un petit plug-in JavaScript Qui permet lors du clic ou d’un autre événement de faire flotter l’élément au-dessus de tout le site. Les LightBox sont très souvent utilisées pour présenter des Photos et des vidéos.

Cela donne une meilleure immersion dans le contenu c’est c’est une technique particulièrement intéressante lors de l’affichage d’images. Avec une Lightbox ou pouvez aussi créer des Pop-in et/ou modal box pour informer vos utilisateurs.

Installer dans WordPress / sans plugins

Nous allons voir ensemble comment il est possible d’installer ce système sans avoir recours à un plug-in. Premièrement vous allez avoir besoin de Jquery normalement celui ci est chargé sur la plupart des sites, mais vérifiez quand même que celui-ci est bien chargée sur vos pages.

Vous vous allez aussi avoir besoin du plug-in Magnific pop up que vous pouvez télécharger sur Github. Vous pouvez aussi charger ce plug-in sur un CDN comme Cloudflare.

Avec Jquery nous allons ajouter une classe Lightbox À tous les liens don l’ancre est une image et don les liens sont bien des images.


/** * * Ajoute une lightbox à toutes les images * qui ont pour lien une image * */ // On sélectionne nos images var $linkImg = $('.entry-content a img').parent(); $linkImg.each(function(){ var parts = $(this).attr('href').split('.'); last_part = parts[parts.length - 1]; last_part = last_part.toLowerCase(); var formatsImg = ["tif", "tiff","gif","jpeg", "jpg", "jif", "jfif", "jp2", "jpx", "j2k", "j2c", "fpx", "pcd", "png", "pdf"]; // On vérifie bien si le lien à comme attribut href une image en checkant l'extension if(formatsImg.indexOf(last_part) !== -1){ $(this).addClass('lightbox'); } }); $('.lightbox').magnificPopup({ type: 'image' });