Utiliser prettyPhoto (plugin lightbox) dans un thème wordPress

Notez que cet article a été écrit pour la première fois il y a plus de 2 ans, mais n'est pas nécessairement obsolète.

prettyPhoto lightbox plugin
prettyPhoto lightbox plugin

prettyPhoto est un plugin de lightbox pour jQuery. On peut l’utiliser dans wordPress en l’appelant par exemple sur toutes les images d’un article. Si il y a plus d’une image, on utilisera prettyPhoto pour afficher une galerie (liens pour passer d’une image à l’autre).

La première étape est d’intégrer le script de prettyPhoto et un script personnalisé pour cibler les images d’un article.

Dans functions.php, on ajoute :

J’ai mis au préalable le répertoire de mon thème dans la constante MY_THEME_URI.

Les fichiers de prettyPhoto sont copiés dans le répertoire prettyPhoto à l’intérieur de mon thème.

Le script personnalisé xbsPrettyPhoto.js est créé dans le répertoire js.

xbsPrettyPhoto.js

À ce stade, cela fonctionne.

Par défaut, prettyPhoto insère les plugins de Facebook et Twitter dans le footer de la lightbox. Afin de modifier cela, si l’on ne veut pas de ces plugins, on ajoute un argument à l’appel de prettyPhoto :

Pour ma part, j’ai décidé de remettre en forme ce footer en y insérant mes propres images pour les réseaux sociaux et mes propres liens en utilisant une fenêtre popup afin d’éviter de charger les plugins sociaux une fois, ou même plusieurs fois.

J’utilise Facebook, Twitter, Google+, Linkedin, Pinterest, Tumblr.

Les icones utilisés :        stockés dans le répertoire images/social/ de mon thème.

On enrichit l’appel à prettyPhoto :

Sur chaque icone, on ajoute un click d’ouverture d’une fenêtre popup pour écrire sur le réseau social choisi :

Et hop, une jolie lightbox intégrée sur les images des articles.

On peut encore enrichir le script d’appel à prettyPhoto en ajoutant les liens youTube, dailyMotion, etc…

[xbs-pp-YT id= »aw2_WYRR4Dw » title= »Corinne Birnie-Scott – Dispersion des Cendres – Octobre 2013″]

1 commentaire

  1. Bonjour et merci pour votre article. Je suis pas codeur à la base mais j’essaye de mettre un peu les mains dans le moteur pour maîtriser mon site web perso.

    J’ai une question et il me semble que vous devriez avoir la réponse. Je vous explique :

    Je cherche à créer un site sous WordPress d’une seule page pour montrer mes galeries de photos. Je souhaite avoir donc sur cette seule page une grille contenant mes différents portfolios (jusque là, j’y arrive) mais j’aimerais qu’un clic sur un des portfolios ouvre une lightbox contenant toutes les photos du portfolio, ce qui éviterait au « client » d’aller d’une page à une autre et rendrait le tout beaucoup plus clair. En général les lightboxs que j’ai pu tester n’ouvrent soit que l’image (featured image du portfolio) soit une galerie des featured images de tous mes projets, autrement dit, les images qui apparaissent déjà dans ma grille.

    Ma question est donc : Peut-on choisir pour chaque lien le contenu de la lightbox ? et si on veut aller plus loin, peut-on automatiser le processus de façon à ce que cela fonctionne pour tous les projets créés par la suite ?

    Je vous remercie par avance. J’espère ne pas vous ennuyer avec ces questions. Il me semble que ça serait une fonctionnalité intéressante pour simplifier la navigation.

    Mes amitiés et une très bonne journée

     

     

    Répondre

Soumettre un commentaire

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