Ajouter un effet lightbox dans WordPress (avec ou sans plugin)

L’effet lightbox est aujourd’hui bien connu et souvent apprécié des utilisateurs. Il permet d’agrandir une image en cliquant dessus dans un popup grâce, le plus souvent, à la bibliothèque jQuery.

Nous allons voir comment ajouter cet effet à notre thème WordPress, d’abord en installant un plugin, puis sans plugin.

Effet Lightbox avec un plugin

jQuery Colorbox est mon plugin préféré, il est très complet et permet une bonne intégration graphique grâce à la multitude de skins mis à disposition (plus vos talent en CSS…).

Il suffit de l’installer, de le configurer comme vous le souhaitez et tout fonctionnera parfaitement, et ça, c’est cool.

En revanche, pour que l’effet fonctionne sur vos images il faut bien veiller à mettre dans la cible de lien de l’image l’adresse de celle-ci :

Effet Lightbox sans plugin

Il est également possible d’ajouter un effet lightbox à votre thème sans avoir recours à l’utilisation de plugin. Pour que cela fonctionne il faut encore une fois faire attention à bien laisser la cible du lien de vos images, vers vos images.

Il faut également télécharger ceci : prettyPhoto_compressed_3.1.2

Puis installer le tout dans le dossier de votre thème comme ceci :

– le dossier images de prettyPhoto_compressed_3.1.2 dans le dossier de votre thème

– le fichier prettyPhoto.css (qui se trouve dans prettyPhoto_compressed_3.1.2css) est à placer dans votre dossier thème (ex rep CSS)

– et enfin, le fichier jquery.prettyPhoto.js (qui se trouve dans prettyPhoto_compressed_3.1.2js) est à placer dans le dossier scripts de votre thème.

Nous allons maintenant ajouter une fonction à notre fichier functions.php pour activer le jQuery

function insert_jquery(){
wp_enqueue_script('jquery');
}
add_action('init', 'insert_jquery');

Il faut également que toutes nos pages soient liées aux différents fichiers que nous venons d’ajouter. Il nous faut donc ajouter ces lignes de code suivantes dans notre fichier functions.php :

function theme_name_scripts() {
wp_enqueue_style( 'style-name', get_template_directory_uri() . '/css/prettyPhoto.css' );
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/scripts/jquery.prettyPhoto.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

Nous allons également ajouter le Javascript suivant, c’est lui qui va permettre de détecter les images dans vos pages qui ont pour cible elles mêmes. Du coup, c’est ce script qui va activer l’effet lightbox sur vos images. A noter que l’avantage de cette méthode est qu’il n’est pas nécessaire d’ajouter une classe spéciale à vos images pour activer l’effet.

<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function($) {
$("a[href$='.jpg'], a[href$='.jpeg'], a[href$='.gif'], a[href$='.png']").prettyPhoto({
animationSpeed: 'normal', /* fast/slow/normal */
padding: 40, /* padding for each side of the picture */
opacity: 0.35, /* Value betwee 0 and 1 */
showTitle: true /* true/false */
});
})
// ]]></script>

Il se peut que votre lightbox ait des petits soucis au niveau de son CSS, et notamment sur les url des images. Si vous avez bien placé les dossiers comme je vous l’ai indiqué, vous aurez à coup sûr ce souci. Voilà la procédure qui devrait résoudre le problème en question :

– Ouvrir prettyPhoto.css

– CTRL + F pour rechercher toutes les chaines de caractères “url(../” de votre fichier.

– A remplacer par “url(”. Il devrait y avoir une centaine de modifications.

– Sauvegardez votre fichier.

Il ne vous reste plus qu’à transférer tous vos fichiers sur votre ftp et le tour est joué !

Source : fearlessflyer.com

Documentation sur la lightbox : no-margin-for-errors documentation