[AUTOMATIQUE] Cet article a plus de 5 ans.
Il se peut donc que les informations qu'il fournit ne soient plus totalement exactes.

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

Article rédigé parBrice CAPOBIANCO

Autodidacte passionné par WordPress. J'aime apprendre et créer pour ensuite partager !

Coorganisateur des Meetups WordPress Rennes et fondateur de bweb.
Partager cet article

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

Afficher les 21 commentaires

21 commentaires

  1. la methode sans plugin ne fonctionne pas du tout pour moi, et aucun plugin effet lightbox ne fonctionne non plus, que pourrait être le probleme? Au départ je pensais que c’etait la bibliotheque jquery qui manquait mais je l’ai activé a l’aide de tuto, cela ne fonctionne toujours pas

    • Bonjour Mouna,
      OK, nous sommes sur Internet, mais un « Bonjour […] merci » n’est jamais de trop.
      Compte tenu du peu d’information fourni, je ne peux pas vraiment aider.
      La seule raison que j’ai en tête est tout simplement que les liens de vos images ne pointent pas vers les fichiers images… à vérifier lors de l’insertion d’un média. (Vérifier aussi que jQuery est bien chargé dans le thème).
      Bonne journée.

    • Bonjour Vincent,
      d’après la page du plugin (wordpress.org/exten…-colorbox/) il n’est pas confirmé que ce dernier fonctionne parfaitement avec WP 3.5.1.
      En regardant de plus prêt le code de votre page. Il apparaît que le script php de colorbox qui ajoute les classes à vos liens fonctionne mais qu’en revanche aucun script js n’est appelé. (le plugin est bien installé mais mal exécuté à priori).
      Vous pouvez donc essayer de l’appeler vous même pour voir si cela résout le problème.
      Sinon, je vous invite à essayer la solution sans plugin ou bien à changer en changer tout simplement.

  2. Bonjour Eliz,
    La réponse à ton problème est relativement simple.
    La manière dont le script est appelée ne permet de gérer les galeries.
    On pourrait, en revanche, demander à un autre petit script en jquery de se charger de l’affaire.
    Ceci devrait normalement fonctionner si tu remplaces le script js que tu as déjà par celui-ci :


    jQuery(document).ready(function($) {
    $("a[href$='.jpg'], a[href$='.jpeg'], a[href$='.gif'], a[href$='.png']").attr('rel', 'prettyPhoto[galerie]');
    })
    jQuery(window).load(function($) {
    $("a[rel^='prettyPhoto']").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 */
    });
    })

    NB : je n’ai pas pu tester 😉

    • Bonjour
      Merci pour cette réponse rapide. C’est parfait le script fonctionne et en plus il règle le problème du undefined.
      Merci encore.

    • Bonjour Eliz,
      Ravi de voir que ça fonctionne comme tu le souhaites.
      Hier, je n’ai pas eu le temps d’expliquer pour quelle raison je te suggérais d’utiliser ce nouveau script.
      En voici donc l’explication :
      Le plugin prettyPhoto précise dans sa doc que pour activer les galeries, il faut ajouter à la fin de l’attribut « rel » d’un lien le nom de la galerie que l’on souhaite utiliser sur tel ou tel lien.
      Dans ton cas, je suis parti du principe que tu souhaitais ajouter une galerie par page, on donne donc le nom [galerie] à cette galerie « unique ».
      Le problème était que nous demandions, à l’origine, de charger prettyPhoto pour tous les liens ayant pour destination une image. On ne pouvait donc pas préciser que ces liens/images faisaient partie de la même galerie.
      La solution à ce problème est donc simple et se compose de 2 étapes :
      Dans un premier temps, nous allons demander à jquery d’ajouter l’attribut « rel » de notre choix à tous les liens ayants pour destination une image. Le « rel » en question est celui fourni dans la doc du plugin prettyPhoto, à savoir « prettyPhoto[galerie]».
      Dans un second temps, il ne nous reste plus qu’à appeler normalement le script en lui demandant de s’activer pour les liens contenants l’attribut « prettyPhoto[galerie]».
      Et voilà ! Le tour est joué.
      A noté, que nous ajoutons l’attribut « rel » lorsque le DOM est chargé via « (document).ready » et que nous appelons le script prettyPhoto seulement lorsque l’intégralité de la page est chargée via « (window).load ». Ainsi, on est sûr que l’attribut « rel » a bien été ajouté et donc qu’il existe déjà.

  3. Bonjour
    Je viens de découvrir votre excellent script.
    Je l’ai installé sur mon site mais je n’arrive pas à faire fonctionner la navigation entre les images.
    Elle n’apparait pas et sous FireFox la fonction semble désactivée.
    Auriez-vous une solution ?
    Merci

  4. Bonjour Alain,
    le mieux est de mettre le script avant la fermeture du body.
    Comme ça, tu es sûr que tous les autres script sont bien chargé avant que tu n’en demande l’éxécution.

    Pour les boutons twitters et facebook il faut aller fouiller dans prettyPhoto.js entre la ligne 8 et 9 (elles font bien 10 lignes en réalité) et supprimer ce qui est entre les 2 chaînes de caractères suivantes :

    de ceci ==> ,social_tools à ceci ==>’},pp_settings

    Normalement ça devrait être bon. N’hésite pas si tu as d’autres questions.
    Bonne journée.

    • Merci pour ces infos Brice!
      je vais farfouiller !! Mais je pense qu’il faut faire attention de ne pas enlever une virgule ou une accolade sinon le fichier devient inutilisable.
      Par contre je n’ai pas les flèches qui s’affichent pour la navigation dans l’album mais les vignettes au bas de la photo ce qui permet de changer.
      A la limite c’est bien aussi mais j’aurais aimer avoir le bouton « fermeture » même si en cliquant sur l’arrière plan cela fait office!

  5. Bonjour!

    Merci pour ces renseignements!
    Par contre le script je dois le mettre aussi dans le fichier Header.php?
    par ailleurs peut on enlever les boutons twitter et facebook?

  6. Très efficace et simple à mettre en place (et une solution sans installation de plugin, c’est toujours mieux je trouve), un grand merci à toi !