Ça fait trois semaines que j'ai installé Lightbox v2.0 (à ne pas confondre avec des galeries photos php qui comme par hasard ont le même nom :). Il s'agit d'une déclinaison du script Lightbox créé par Lokesh Dhakar par son auteur originel. Cet ensemble de scripts consistent en une suite de manipulations très élégantes par Javascript de la structure d'une page web (ce qu'on appelle le DOM) uniquement en utilisant des attributs existants déjà et en modifiant la page à la demande de l'utilisateur. Extrême simplicité de mise-en-œuvre, élégance du procédé et respect de la séparation entre sématique HTML, style CSS et code JS dans les normes actuelles de développement web. Il est “élégemment dégradable”, ce qui signifie que l'absence du javascript, le manque de compatibilité du navigateur, tout navigateur n'étant pas visuel ou “riche”, un clic du milieu (nouvelle tab) ou droit... conduit à une simplification du script, ou au fonctionnement normal du lien : l'affichage de l'image dans une page à part. La meilleure preuve, c'est que si vous lisez un de mes billets avec cette fonction sur un lecteur de fil RSS ou sur Pataphysique.net, vous aurez le même fonctionnement que d'habitude (exemple avec un article au code inchangé entre chez moi et à <FMR>, sinon l'appel à Lightbox)... Face à ça, les galeries photo en flash peuvent se rhabiller. J'ai été tellement séduit que je l'ai rapidement intégré à mon propre site web. Il m'a fallut 30 minutes pour mettre à jour l'ensemble de mon contenu, c'est à dire mettre du rel="lightbox" dans toutes mes images zoomables. Vous avez pu tester sa fonction galerie ici en premier, puis sur l'expo et l'émission Nouvelle Manga et celle de Samedi dernier.
La mise en forme est absolument simple, grâce à un attribut prévu pour un tel usage dans la norme XHTML.
Mais d'autres scripts interviennent dans mon site, en modifiant la structure du DOM, comme Nicetitle que j'utilise, qui transforme l'attribut title en nicetitle au chargement de la page, et non pas à la volée comme Lightbox. Et hop ! J't'ai casséeuh ta pageuh... D'où modification dans le code de Lightbox pour qu'il utilise cette modification de l'attribut, qui est utilisé pour le titrage des photos. J'espère corriger ce souci dans la prochaine version du site (hin hiiiin... teasing !).
Maintenant, là où le bât blesse, les inconvénients de Lightbox v2, de mon point de vue :
- localisable à condition de regarder dans le script
pas de paramétrage rapide des effets(ou possibilité de désactiver) sinon en cherchant très bien dans le code- pas d'url bookmarkable pour les galeries (et difficilement faisable selon javascript actif ou non)
- pas d'url bookmarkable pour les images (sinon tomber directement dans la version plein écran. point conjoint au 3)
encore quelques bugs dans les zones actives (surtout pour fermer le mode lightbox)- pas de mode bascule plein écran
- pas de réduction automatique si l'image est trop grande pour le viewport du navigateur
- les commentaires et boutons de fermeture sont en bas de l'image (le plus dur à modifier, àmha)
pas de raccourci clavier image précédent/image suivante- trop... beaucoup trop d'appels javascript (ça monte à 7 dans mon site : google analytics, technorati, pasflash, 4 pour lightbox dont prototype scriptalicious et effects de scriptalicious)
Les points 2, 5 et 9 sont corrigés dans la version 2.02 de Lightbox. Les raccourcis sont [p] pour l'image Précédente, [n] pour l'image Suivante... pardon suivaNte. [x], [o] ou [c] pour fermer. Logique... sauf pour le non-anglophone !
les points 1, 2 et 8 pourraient être revus par des déclarations de variable en début de code.
Le point 7 a été résolu dans une autre déclinaison de Lightbox : Lightbox Plus de Takuya Otani.
À noter que les points 3 et 4 sont ceux sur lesquels on critique le plus les sites en flash, sauf que lightbox étant élégamment dégradable, on y a quand même accès.
Bug montrant une fois de plus l'incroyable infériorité de MSIE : un title="" sera traduit par title="null". Très “null”, y'a pas à dire