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″]

Soumettre un commentaire

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