Dans ce billet je vais vous présenter ma version de Lightbox qui permet de faire défiler les images automatiquement à la manière d'un diaporama. Mais pour commencer, petite introduction.

Lightbox

Lightbox est un script JavaScript d'affichage dynamique d'images : un clic sur un lien affiche l'image par dessus la page en cours (voir l'exemple du site officiel).

Il se base sur les librairies JavaScript Prototype et script.aculo.us. Vous devez donc les inclure dans votre page pour pouvoir utiliser Lightbox (voir le howto du site officiel).

Jusqu'à il y a peu, la version la plus récente de Lightbox était la 2.03. Elle utilisait d'anciennes versions de prototype et script.aculo.us... ou plutôt, elle n'utilisait pas les apports des versions plus récentes.

Son auteur a mis à jour ce script en début d'année avec la version 2.04. Au menu, utilisation de la dernière version des librairies, corrections de bugs et code plus mieux bien. Le point majeur est l'utilisation du Builder de script.aculo.us (création d'objets dans le DOM) qui a permis de largement réduire le code.

Lightbox Diaporama

Un client voulait la semaine dernière que la Lightbox que nous avions intégrée à son site dispose d'un défilement automatique des images. Histoire de gagner du temps, j'ai commencé par regarder sur le net ce qu'il existait. J'ai été assez surpris de ne trouver qu'une seule réponse valable.

Dans ce billet, Stéphane Cottin propose au téléchargement une version de Lightbox modifiée par ses soins et offrant la fonctionnalité dont j'avais besoin. Je le remercie au passage d'avoir rendu public son travail.

Je me suis basé sur ce script pour le faire marcher avec la version 2.04 de Lightbox. Vous pouvez télécharger l'archive en cliquant ici.

J'ai utilisé ce script sur mon site, cette page peut donc servir d'exemple d'utilisation.

Changelog

Entre la 2.04 et ma version :
- fichier CSS : sélecteurs ré-écrits pour cibler plus précisément les éléments
- fichier CSS : le bloc span qui affiche la légende de l'image est affiché en tant que bloc et dispose d'une margin-bottom
- fichier CSS : ajouts liés aux ajouts d'éléments pour le diaporama
- fichier JS : portions de code commenté ou ajouté pour inclure les fonctionnalités de diaporama

Entre la version de Stéphane Cottin et la mienne :
- fichier CSS : quelques modifs (tailles, marges...) car je n'ai pas utilisé les mêmes images que lui (close, play, pause...)
- fichier JS : transposition de ses ajouts de code pour coller à la 2.04, quelques adaptations nécessaires

Configuration et utilisation

Vérifier les chemins des images dans le fichier CSS
Dans le fichier JS, modifier les valeurs des attributs de LightboxOptions, vous ne devez modifier que ça dans le fichier
Si vous changez l'une des images, vous serez peut-être amené à modifier des valeurs de tailles ou de marges dans le fichier CSS.

Laisser DiapoLightboxUse à true pour utiliser le mode diaporama ou le passer à false pour revenir au comportement de la Lightbox de base.
Si vous mettez DiapoLightboxStop à false, il faudra cliquer sur Play pour lancer le diaporama à l'affichage de la première image, sinon il démarre automatiquement.

Rappel valable pour la Lightbox de base : si le fond grisé ne couvre pas la totalité de la page, mettez padding et margin à 0 pour le body, et attribuez les anciennes valeurs à un div englobant toute la page, placé juste sous le body dans le DOM.