Ajouter une lightbox gratuite à Wordpress

jQuery Colorbox

Aujourd’hui, je vous propose de découvrir en vidéo un plugin Wordpress qui permet de mettre en place un système de lightbox très sympa sur son site : jQuery Colorbox.

A travers cette vidéo de quelques minutes, je présente le plugin, son utilité, ses avantages et j’explique rapidement comment l’installer et le configurer :

En bref, jQuery Colorbox c’est :

  • plus de 260 000 téléchargements
  • une notation globale de 3,9 / 5
  • des mises à jour régulières
  • 11 choix de templates
  • traduit en 26 langues dont le français
  • un plugin entièrement gratuit

Quelques exemples de templates :

Si ce plugin vous plait, n’hésitez pas à le faire savoir en partageant et en commentant l’article ou la vidéo 😉

Dernière MAJ : le 13 octobre 2015

Ces articles devraient aussi vous intéresser :

37 réactions instructives :

  1. Youssef
    4 mars 2013 à 2 h 43 min #

    Merci pour cette vidéo Maximilien. Le plugin est pratique et simple à mettre en place !

  2. John
    4 mars 2013 à 4 h 41 min #

    En effet l’affichage de l’image est très rapide et agréable, cela met en valeur l’image, j’aime bien.

    Merci monsieur Labadie pour cette vidéo, c’est plus parlant !

  3. Adam
    4 mars 2013 à 15 h 46 min #

    La lightbox ajoute une forme de classe à un wordpress, mais gare à l’alourdissement des pages qui peut être sanctionné par GG ! Quelqu’un a mesuré l’incidence ?

  4. Eric
    4 mars 2013 à 16 h 07 min #

    Hello Maximilien, merci pour la découverte de ce plugin, ma foi fort sympathique 😉
    Je ne le connaissais et je pense qu’il pourra grandement intéressé un ami et client photographe !

    Au passage, je crois que je te l’avais déjà dit mais le format vidéo est vraiment intéressant. Juste un point améliorable, c’est le son :/ Le rendu est un sourd !

    Bonne semaine !

  5. Bruno
    4 mars 2013 à 18 h 25 min #

    Bonjour,

    J’ai déjà essayé plusieurs plugins de lightbox, mais juqu’ici aucun ne m’avait donné entière satisfaction.
    Le rendu de celui-ci m’a l’air bluffant, il va donc falloir que je le teste.
    Je suis d’accord avec Eric concernant le son de la vidéo.
    Un rapide résumé écrit des différentes étapes à suivre serait également un plus pour certains.

  6. Maximilien Labadie
    5 mars 2013 à 2 h 22 min #

    Merci pour vos retours, j’essaierai de faire mieux au niveau du son pour la prochaine vidéo et j’ajouterai un résumé plus complet.

  7. Marion
    5 mars 2013 à 9 h 05 min #

    Merci pour le plugin, c’est effectivement super sympa pour intégrer ca dans un site de photo , ou alors un site qui utilise les images. Apres comment cité plus haut , c’est un plugin donc ça charge plus de ressources et affecte le temps de chargement. Il faut donc trouver le bon compromis entre esthétique et performance.

  8. Accimmo31
    5 mars 2013 à 16 h 06 min #

    Bonjour,

    Est-il possible d’insérer le plugin dans un article ou une page ?

  9. GeekPress
    5 mars 2013 à 19 h 39 min #

    Personnellement, je préfère la lightbox qui s’appel FancyBox et dont un plugin WordPress est disponible sur le repository de WordPress => http://wordpress.org/extend/plugins/fancybox-for-wordpress/

    C’est juste une question esthétique pour le coup 🙂

    • Maximilien Labadie
      6 mars 2013 à 16 h 26 min #

      Il a l’air pas mal aussi, faudra que je l’essaye 😉

  10. Tristan
    6 mars 2013 à 6 h 39 min #

    Sympa ce plugin, je le trouve mieux que certains autres que j’ai pu essayer, donc là je suis en train de réfléchir si je vais l’utiliser ou pas, mais je pense que oui.
    Pour le tutoriel en tout cas c’est une excellente idée de l’avoir fait en format vidéo 😉

  11. Arnaud
    6 mars 2013 à 9 h 56 min #

    Bonjour,

    Pour l’avoir déjà utilisé, je confirme que ce plugin est de bonne qualité.
    Souvent mis à jour (important pour la sécurité de votre site web), et facile à mettre en place, je m’en sers souvent pour les sites de mes clients.

  12. Jeromeweb
    6 mars 2013 à 14 h 16 min #

    J’utilise actuellement Easy fancy box mais c’est vrai que Jquery Colorbox a l’air intéressant.
    Tu as testé la compatibilité multi plateformes et multi navigateurs?
    Sur mobile ça donne quoi?

  13. Thomas
    7 mars 2013 à 11 h 04 min #

    Si les images sont de taille fixe, je préfère faire un box moi-même en JavaScript. C’est plus long et plus compliqué à faire, mais tellement plus léger à charger !

  14. Mikie
    9 mars 2013 à 22 h 07 min #

    Comme le dit Marion, ça alourdit un peu mais bon, ça en jette beaucoup aussi il faut dire =) Après, reste à voir l’utilisation qu’on fait de ses images aussi. Et j’appuie les autres commentaires, le format vidéo, y’a pas plus clair!

  15. Erwan
    11 mars 2013 à 1 h 50 min #

    oh excellent ce système. Faudrait que je regarde ça de près, que je teste car cela a l’air drôlement pratique pour les images.

  16. Belline
    11 mars 2013 à 11 h 20 min #

    Je l’ai essayé récemment, et étrangement, les vidéos ne s’affichaient plus sur mon blog après activation de celui-ci…

    Mais il est vrai qu’il est très bien.

  17. Finres
    11 mars 2013 à 15 h 42 min #

    Merci pour ce tuyaux fort intéressant.

  18. Matthieu
    11 mars 2013 à 18 h 48 min #

    Bonjour !

    C’est aussi le plugin que j’ai choisis que je cherchais une solution, le rendu est sympa je trouve et puis quand j’en ai marre, je peux modifier la light box :).

    Un détail, il faut penser à lier l’image au lien de l’image ou la light box ne s’affiche pas.

    Je rejoins Eric sur ce point: le format vidéo est sympa mais le son est vraiment très léger :-/.

  19. Anthony
    13 mars 2013 à 12 h 21 min #

    Merci pour la présentation de ce plugin, je suis tomber dessus par hasard et je viens de l’intégrer a un de mes blogs, rendu vraiment sympas 😉

  20. Pierre
    14 mars 2013 à 21 h 12 min #

    Tiens je le connaissais pas celui là, thks, le rendu est sympa mais perso je préfère le rendu fancy, après les goûts et les couleurs ….

  21. Sarah
    15 mars 2013 à 16 h 29 min #

    Très sympa ce plugin, j’utilisais SimpleLightBox mais celui ci me semble plus abouti !

  22. Alain
    23 mars 2013 à 14 h 44 min #

    Bon plugin. Par contre, pour moi, il ajoute une lettre négative sur GtMetrix. En gros, le plugin à l’air lourd. A choisi je préfère Fancybox qui ne change rien à mes résultats sur GTMetrix.

    Par ailleurs, pour ma part, ce que je déplore, c’est que wordpress ne propose pas une lightbox de base, totalement transparente. Car pour chaque image est créée une page où potentiellement un spammeur peut venir y planter son message inutile.

  23. Karyn
    26 mars 2013 à 15 h 54 min #

    Salut, merci pour tous ces renseignements sur ce plugin, il très efficace et simple à mettre en place, par ailleurs peut on enlever les boutons Twitter et Facebook ? Merci pour excellent article. Amicalement.

  24. Jean
    26 mars 2013 à 16 h 43 min #

    Merci pour l’information, je suis photographe à mes heures avec quelques velléités de blogging et ce plugin me sera très certainement utile lorsque je m’y mettrai!

  25. Sylvain
    31 mars 2013 à 22 h 51 min #

    Les lightbox sont vraiment utiles quand on a un site avec plein d’images…
    Et je sais de quoi je parle 😉

  26. Ploufside
    8 avril 2013 à 15 h 56 min #

    jQuery Colorbox est clairement le meilleur plugin gratuit pour de jolies effets de lightbox. Une référence dans la plupart de mes projets 😉

  27. Isabelle
    14 août 2013 à 14 h 16 min #

    Merci pour cette astuce!

    D’autant plus que l’ajout d’une image sur son site est actuellement conseillé pour rendre son site plus attrayant, rendre l’image compatible à une lightbox la rendra beaucoup plus sympa.

  28. Pierre
    16 septembre 2013 à 10 h 57 min #

    Bonjour,

    Merci de ce tuto clair…

    je cherche depuis 2 j comment mettre en place des lightbox sur mon site, j’ai essayé 5 plugin, aucun ne fonctionne !! Qu’est-ce que je fais de mal ??

    Sur mon site, il n’y a qu’un page pour le moment, je voudrais quand on clique sur Allan Wright que son portrait s’ouvre d’ans une lightbox, rien n’y fait ?

    Une idée ?

    P

  29. Hilal
    16 septembre 2013 à 17 h 29 min #

    Existe-t-il des plugin similaires pour afficher du code html ? je pense par exemple à un genre de “widget text” mais en lightbox.

  30. Max
    27 novembre 2013 à 17 h 54 min #

    J’ai essayé au moins cinq plugins avant et rien ne fonctionnait. Et là, en deux minutes, c’est fait ! Merci pour ces explications.

  31. Efraïm de Parcours Web Entrepreneur
    17 mars 2014 à 14 h 04 min #

    Excellent ce petit plugin, je viens de l’installer et je le trouve carrément SUPER. Je le cherchais depuis. Aujourd’hui je l’ai trouvé 🙂
    Merci pour cet excellent partage Max!

    A bientôt

  32. Helen
    26 mars 2014 à 14 h 24 min #

    Alors dans un 1er tps merci pour ce super tutoriel.
    Mais je dois être bête ou quelques choses du genre, J’ai installé tout est beau tout est bien mais quand on clic sur l’image la visionneuse ne se met pas en place.
    Quelqu’un peut me dire où j’ai fait une gaffe?
    Merci à vous tous pour votre aide.

    A bientôt

    • Maximilien Labadie
      26 mars 2014 à 18 h 26 min #

      Salut Helen,

      Peut être s’agit-il d’un conflit avec un autre plugin ? Essaye de désactiver les autres plugins pour voir si cela marche correctement après et savoir lequel pose problème.

      A bientôt !

  33. helen
    26 mars 2014 à 20 h 15 min #

    ALors je viens de voir que c’est avec mon thème que j’ai créé moi même.
    Si j’en mets un de Wordpress ça fonctionne, je suis donc en train de voir où ça beug…
    Poufff la route est longue là !!

    Merci

  34. helen
    26 mars 2014 à 20 h 16 min #

    Peux tu juste me dire si toi tu ajoutes d’autres choses dans tes pages index.php…
    ou d’autres fichier comme des img, js…???

  35. Maximilien Labadie
    27 mars 2014 à 17 h 33 min #

    En général, j’utilise toujours des thèmes Wordpress ayant bonne réputation et je ne les édite qu’un peu : pour les traduire, et si besoin pour ajouter quelques petites fonctionnalités en veillant à ce que cela ne rentre pas en conflit avec le thème et les plugins utilisés.

    Si tu as créé ton propre thème de A à Z, il est primordial de veiller à respecter le codex de Wordpress au risque de faire face à ce type de problématique… Je te conseillerais d’utiliser un thème de qualité et de le personnaliser à tes besoins, mais en respectant les standards de Wordpress.

    Tiens moi informé si tu as trouvé une solution 😉

Que penses-tu de l'article ?

Je souhaite recevoir les meilleurs conseils et astuces de Web & SEO


9bb34f2c113a12ab1409033689328090bbbbbbbbbbbbbbbbbbbbbbbb

Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match