Dojo Lightbox

Aujourd'hui je me propose d'illustrer la mise en place de lightbox à la sauce Dojo comme toujours. Pour ceux qui n'en ont jamais entendu parler, dépêchez-vous cliquez sur les images ci-dessous.

L'implémentation est fortement inspirée de la librairie de Lokesh Dhakar; d'ailleurs l'équipe Dojo n'hésite pas à le dire ouvertement ici. Mais alors quel intérêt à utiliser l'implémentation faite par Dojo plutôt que la version originale? Pour être franc, la seule raison qui puisse vous faire choisir celle de Dojo est le fait d'utiliser déjà ce framework, car honnêtement la version originale est esthétiquement un tout petit peu mieux.

J'entends déjà certain d'entre vous dire, mais pourquoi ne pas utiliser lightbox et Dojo conjointement. C'est effectivement possible, mais sachez que lightbox se repose sur le framework scriptaculous lui-même reposant sur prototype.

Voila... vous commencez à comprendre, vouloir les faire cohabiter signifie aussi ajouter les 2, 3 plus gros framework javascript dans vos pages; bonjour les performances!

Le choix se fait donc assez rapidement, si vous utilisez déjà Dojo alors utilisez leur implémentation; si par contre votre coeur balance plutôt pour scriptaculous ou prototype alors vous préférerez l'implémentation de Lokesh Dhakar.

Bon passons aux choses sérieuses, voici ce qu'il vous faut faire pour utiliser cette jolie feature.

Import des css tundra et image

Notez l'url pointant vers la seconde css (image.css). La documentation officielle référence Lightbox.css, mais c'est malheureusement une erreur.

Import de la fonctionnalité dans un bloc javascript

 dojo.require("dojox.image.Lightbox");

Il ne vous reste plus qu'a l'utiliser maintenant de la manière suivante :

Notez l'utilisation de l'attribut group, qui vous permet d'enchainer les images d'une même série.

J'espère que cette présentation vous donnera des idées pour vos galerie d'images.

Les images utilisées dans l'exemple ci-dessus proviennent du site de Lokesh Dhakar, que je remercie bien évidemment.