Vous êtes sur Barbablog et tu kiffes jeune. Cherche sur ce blog...

Lightbox et wordpress

Je sais ça fait gadget… Mais quel beau gadget ! Je voulais depuis quelques temps mettre en oeuvre la lightbox sur ce blog pour afficher les images. La lightbox est un script (javascript) développé par Lokesh Dhakar qui permet d’afficher une photo en surimpression sur une page

Démonstration

Piéton

C’est classe hein !

Les avantages sont nombreux

  • pas de rechargement de page (l’image est appelée en ajax)
  • script non obstrusif (si l’utilisateur n’a pas javascript activé, il a quand même accès à l’image grandeur nature)
  • La photo est dans un contexte idéale (le contenu de la page de départ est masqué)
  • c’est super flahsy, geek, tendance, funky, web2.0 etc etc…

La mise en oeuvre est simple

  • il suffit de rajouter un appel au script dans le header
  • et d’ajouter un attribut rel ="lightbox" dans le lien qui appelle l’image

Comme je suis fainéant, ce n’était pas encore assez simple pour moi. Bon, la vraie raison étant que dans WordPress, pour des raisons de maintenabilité évidente, la meilleure solution pour rajouter une fonctionnalité est toujours d’utiliser un plugin. J’ai donc cherché LE plugin idéal et le voici : Lightbox2 plugin de Fredrik Fahlstad.

Il suffit de l’installer, de l’activer, et toutes les miniatures déjà en ligne dans vos articles se verront appliquer ce script rétroactivement. C’est ça la magie de la lightbox !

Mise à jour

Je l’ai dégagé du barbablog. Ce plugin était un peu gourmand en poids. Il installe sa propre instance de la librairie prototype. Pour peu que vous utilisiez déjà prototype pour un autre script, vous vous retrouvez à charger 2 x 48 ko. Ce qui pour un effet lightbox, aussi joli soit-il, est un peu lourd.

Mise à jour – bis

J’ai installé une autre version de la lightbox pour wordpress qui permet de paramétrer très simplement l’endroit où le script va chercher prototype et scriptaculous. Ainsi si vous installez d’autres plugins qui utilisent également l’une de ces 2 librairies, vous ne serez pas obligé de charger 2 fois chaque librairie. Et ça, c’est pas du luxe.

Vous pouvez paramétrer l’application rétroactive de l’effet lightbox sur toutes vos miniatures déjà publiées (en gros soit vous le faites, soit vous ne le faites pas – ceci dit, je ne vous le conseille pas, ça ruine la validité de vos pages xhtml – il faudrait réécrire l’expression régulière – si quelqu’un s’en sent le courage…) et vous pouvez également faire des groupements d’images qui apparaîtront sous forme de diaporama avec des boutons « prev » et « next » dans la lightbox pour la navigation. Pour ce faire, il vous suffit d’insérer dans le lien qui appelle l’image élargie l’attribut : rel="lightbox[mondiapo]"

Mise à jour – ter

J’ai échangé mon baril de prototype contre un bidon de mootools et au passage, je suis passé de la lightbox à la slimbox.

La slimbox, c’est la même chose que la la lightbox, en plus léger (7 ko au lieu de 20 ko). Slimbox se base sur la librairie javacript mootools (25 ko seulement !) et est complètement compatible avec l’ancienne lightbox. En gros, il suffit de remplacer dans votre head prototype.js, scriptaculous.js et lightbox.js par mootools.js et slimbox.js et le tour est joué !

Mise à jour – quatro

Le script fancybox remplace l’ancienne slimbox. La fancybox est le script que j’ai utilisé sur la plupart de mes projets pros et persos. Il est personnalisable, robuste, dispose d’une api bien documentée et permet d’afficher aussi bien des images que du contenu inline ou même des pages web, le tout en ajax. Cherchez pas, y’a pas mieux.

21 réponses à “Lightbox et wordpress”

  1. Ouaiiiiis !!! ça, c’est une vraie bonne nouvelle ! Dire qu’ils n’en ont même pas parlé aux infos ! Pfff ! Les journaleux sont tous vendus à Typepad, c’est bien connu !

    Bref, super, j’avais essayé une ancienne version du plugin et ça marchait moyen. Je cours essayer celle-ci !… Enfin, tout à l’heure, là, il fait super beau, ce serait ballot de rester devant le PC, hein ! 😉

  2. ness dit :

    Waooo secours !!!bonjour , je suis un débutant sous wordpress !!!… j’ai installé le plug in ..mais je coince sur le reste …si tu as un peu de patience et de temps !!

    Lightbox v2.0 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header.: ….. le header.PHP ???

    j’ai chargé une photo dans mon billet qui apparait miniaturisée , si je tente de modifier la taille ..la catagraphique !! est ce normal?

    je l’ai collé a la suite dans le header .php ..j’ai juste ?
    image #1
    heuuu la je sèche .. dans wordpress , l’editeur de billet j’ai bien un passage sur l’html .. mais pas de Href ..ou placer mon

    rel = »lightbox » ??????

    je suis confus désolé

    Le ness

  3. Gregoire dit :

    Pas de panique : tu as toutes les instructions ici : http://www.4mj.it/lightbox-js-v20-wordpress/

    Normalement tu n’as pas besoin de modifier ton header.php. Tu installes ton plugin, tu l’actives (via ton tableau de bord) et c’est parti.

    La seule chose que tu as à faire une fois ton plugin activé, c’est rajouter l’attribut rel= »lightbox » dans ton lien comme ceci : [a href= »monimage engrand.jpg » rel= »lightbox »][img src= »imageminiature.jpg »/][/a]

    Voilà. J’espère que c’est clair 🙂

  4. ness dit :

    … merci encore !!!! pour ton passage sur mon embryon de site et ton soutien a un débutant sous WP !!!
    A+

  5. wanker dit :

    vraiment bien ce plugin, gadjet certes mais super classe !

    par contre sur mon blog, j’ai un petit soucis de superposition entre certaines images. en fait mon menu dans la sidebar est entierement fait en images et celle-ci restent superposées au dessus de l’image ouvert par lightbox.

    qqun a t il deja eu ce probleme ?
    je galere….

  6. Le_greg dit :

    Trop la classe! merci

  7. […] Pour voir l’affiche de Marcel, il suffit de cliquer sur l’image (merci “Lightbox” et les conseils de Barbablog) […]

  8. Nicolas dit :

    Bonjour, super plug, je n’arrive juste pas à faire tourner le diaporama (voir sur http://www.palaissalamtaroudant.com )
    c’est sur le mondiapo , sa syntaxe et l’emplacement des images que je cale à mon avis.

  9. Nicolas dit :

    Ok pour moi, ça tourne sympa (le diapo), il suffit de répéter l’opération le nombre de fois équivalent au nombre des diapos (évident dsl)

  10. Al-Kanz dit :

    Impec ! Merci.
    C’est beaucoup plus simple ainsi.

  11. […] sur mootools. Et miracle, je l’ai trouvé : la slimbox. Tous les détails sont dans le billet sur l’implantation de la lightbox, que j’ai mis à jour pour parler de la […]

  12. canape dit :

    Bonjour et merci pour les explications 🙂
    Quand tu dis « En gros, il suffit de remplacer dans votre head prototype.js, scriptaculous.js et lightbox.js par mootools.js et slimbox.js et le tour est joué ! » où doit-on faire ces modifications ? Dans header.php ?
    je ne trouve pas le lien vers scriptaculous par exemple…

    Merci par avance

  13. Soph dit :

    Bonsoir 😉
    Je suis sous wordpress 2.3 et j’ai activé le plugin slimbox.
    Par contre, je n’arrive toujours pas à comprendre où je dois mettre le code lorsque mon image est uploadée ? Ok je suis nulle…

    Voici mon code lorsque je veux mettre une image dans mon texte:
    [a href=’http://monsite.com/wp-content/photos//king-california.jpg’ title= »></a]

    Maintenant, j’aimerai savoir où je dois mettre l’autre bout de code ?
    rel=”lightbox”

    Et à quel moment je peux utiliser ce code là ?
    rel=”lightbox[roadtrip]”

    Merci par avance ^^

  14. […] après le lien de votre image. Vous trouverez de l’ aide sur ce site. Il existe le même plug pour la vidéo, videobox, mais il commence a se faire tard…:=) Tags: […]

  15. Stef dit :

    Bonsoir,

    J’ai installé le plug-in lightbox sur mon blog wordpress sur la news http://meseconomies.free.fr/?p=6 : l’effet fonctionne et je trouve ça superbe, par contre j’ai un problème qui n’est pas lié à lightbox mais en réduit l’effet :
    -> c’est l’horrible encadré bleu sur la miniature de mon image qui devient violet une fois le lien visité.
    Je pense que la soluce est toute simple car je ne vois ceci que dans mon blog et qu’apparemment tout le monde a résolu ce problème. Je bloque pourtant dessus !

    Merci d’avance à celui ou celle qui me dépannera.

    S.

  16. CustMax dit :

    Salut Stef,

    C’est « normal »: ce sont les liens qui sont colorés d’un couleur suivant s’ils sont visités ou pas. Pour qu’il n’y en ai pas, je te conseille d’ajouter ceci dans ta feuille de style (CSS):

    img
    {
    border:0;
    }

    Et ça enlevera le contour 😉

  17. Stef dit :

    Merci CustMax.

  18. nova06 dit :

    Bonsoir,

    je viens de mettre en place le plugin slimbox sous wordpress 2.6.3.
    Cependant, si j’arrive à mettre une photo sous le plugin, je n’arrive pas à le faire pour une galerie [gallery] entière dans un article.

    Dois-je reprendre une à une toutes les photos de la galerie (c’est à dire réinstaller les photos pour mettre dans l’url le code en question) ou bien y a t-il une méthode moins lourde pour automatiser l’affichage du script ?

    Merci de votre réponse.

  19. Grégoire dit :

    Bonjour novao6, la seule méthode que je connaisse qui permette de faire une galerie avec les touches « prev » et « next » avec la lightbox, c’est effectivement de mettre les images une par une et de ne pas utiliser le bout de code [gallery] fourni par WordPress. Il faut insérer les images une pas une et rajouter dans le lien (a href= »urlphoto ») de toutes les images que tu veux voir faire partie de ta galerie l’attribut : rel= »galerie[vacances] ».

  20. SYLVESTRE dit :

    Bonjour,
    Il semble que la démo ne fonctionne plus. L’image s’affiche de manière classique et pourtant mon javascript est bien activé !
    Salutations

  21. Grégoire dit :

    @Sylvestre >>

    Effectivement, j’ai supprimé l’effet lightbox de ce blog. Désormais je préfère envoyer vers une page dédiée qui contient la photo. Ainsi je peux ajouter des commentaires, un légende etc… Pour les besoins de ce billet, j’ai quand même réactivé la lightbox sur cette page uniquement. Donc ça remarche !

Laisser un commentaire