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

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.