AJAX - Mes photos de vacances avec LightBox

Comme promis lors de la présentation du "Smooth Slideshox", je vais présenter une seconde librairie Javascript permettant de présenter les photos. La bibliothèque LightBox est de plus en plus utilisé sur le Web. Il a l'immense avantage d'agrandir joliment une photo sans avoir à se soucier de la navigation. La bibliothèque s'appuie sur le couple prototype.js/scriptaculous.


Comment installer LightBox
L'installation et l'utilisation de la bibliothèque LightBox dans une application Lotus Domino est similaire aux autres librairies déjà présentées sur ce blog :

1. Télécharger le package sur http://www.huddletogether.com/projects/lightbox2/
2. Décompresser le fichier ZIP sur le disque dur
3. Ajouter les fichiers prototype.js, scriptaculous.js, effect.js et lightbox.js et lightbox.css dans les ressources partagées de la base Notes
4. Ajouter les fichiers close.gif, loading.gif, blank.gif dans les ressources images partagées. On peut aussi ajouter les autres images présentées mais elle ne seront pas nécessaires dans l'exemple décrit.

Comment utiliser la bibliothèque Lightbox
Depuis l'élément de structure devant afficher les images LightBox (masque ou page), indiquer comme "Contenu de titre HTML" :

"<link rel=\"stylesheet\"
type=\"text/css\" href=\"lightbox.css\"
media=\"screen\" title=\"Normal\" />
<script src=\"script/prototype.js\" type=\"text/javascript\">
</script> 
<script src=\"script/scriptaculous.js\" type=\"text/javascript\">
</script>
<script src=\"script/lightbox.js\" type=\"text/javascript\">
</script>"

Ajouter aussi sur l'évènement "OnLoad" :

initLightbox();

Votre masque ou page est prête.

Pour déclarer une image ou photo devant utiliser lightbox il faut utiliser la syntaxe suivante :

<a href="path_de_l_image_agrandie" rel="lightbox" >
<img src="path_de_l_imagette" />
</a>

Une mini-galerie photo sous Lotus Domino à télécharger
Pour l'ocasion j'ai créé une mini galerie photo sous Lotus Notes à télécharger. Ne vous attendez pas à une révolution. Cette application n'a que comme unique but de présenter l'intégration de LightBox dans une base Notes. Par contre, pour faire plaisir à Julien, les 3 photos fournies en exemple sont ... en couleur.

Télécharger la galerie photo Lightbox