En tout premier lieu, il faut télécharger le module sur le site de Lokesh Dhakar. Après décompression de l'archive, renommez le dossier en "lightbox" tout simplement.

Ce module doit être adapté pour y indiquer les adresses http absolues de certaines images utilisées dans les animations. Il vous faut ouvrir le fichier lightbox.js avec un éditeur de texte (Textwrangler, par exemple); ce fichier se trouve dans le dossier js. Vous devez modifier les 2 lignes en tête du fichier après les commentaires :

var fileLoadingImage = "http://www.xx.com/lightbox/images/loading.gif";
var fileBottomNavCloseImage = "http://www.xx.com/lightbox/images/closelabel.gif";

Bien sûr, remplacez www.xx.com par l'adresse de votre site web. Enregistrer les modifications

Avec votre client ftp préféré, téléchargez l'ensemble du dossier "lightbox" vers la racine de votre site web.

Ensuite, il faut (très) légèrement modifier le thème que vous utilisez dans RapidWeaver de manière à charger le script dès l'ouverture de la page. Avec RapidWeaver 3.5, affichez le tiroir des thèmes, puis faites un clic droit (ou CTRL+clic) sur votre thème et sélectionnez "Dupliquer..." dans le menu :



Cela assure une sauvegarde recommandée du thème; cette copie de sauvegarde est placée dans le dossier ~/Library/Application Support/RapidWeaver. Je vous recommande d'utiliser cette copie du thème eu lieu de l'original. Vous pouvez en modifier l'intitulé afin de ne pas le confondre avec l'original. Pour cela, affichez le contenu et ouvrez le fichier Theme.plist pour y modifier les entrées RWThemeName et RWThemeDisplayName (au moins pour la langue FR).

Le fichier à modifier pour charger notre script est le fichier index.html. Utilisez comme précédemment un éditeur de texte comme TextWrangler.

Après la ligne

<user_javascript>

insérez les lignes suivantes :

<!--Start LightboxJS2-->
<link rel="stylesheet" href="http://www.xx.com/lightbox/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://www.xx.com/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="http://www.xx.com/lightbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://www.xx.com/lightbox/js/lightbox.js"></script>
<!--End LightboxJS2-->

Comme précédemment, vous devez remplacer "www.xx.com" par l'adresse de votre site web. Enregistrez le fichier.

Désormais, dans l'entête de chaque page, les quelques lignes ci-dessus sont ajoutées, ce qui va vous permettre de mettre en oeuvre le script grâce à quelques instructions très simples. Attention s'il s'agit d'une page déjà existante dans votre projet, il faut forcer la reconstruction de cet entête, par exemple en changeant le thème puis en revenant au thème modifié. Avec RapidWeaver 3.5, vous pouvez facilement vérifer cela en affichant le code de la page.

Passons maintenant aux choses sérieuses en ajoutant du contenu qui mettra en oeuvre l'animation en javascript. Le principe de base est de construire un hyperlien avec quelques trucs en plus. Eh oui, c'est du HTML, mais rien de bien compliqué.

<a href="http://www.xx.com/images/image1.png" rel="lightbox" title="Le titre de l'image">L'intitulé du lien</a>

Vous constatez que tout ça est tout ce qu'il y a de plus classique. A part le tag "rel" qui sert normalement à indiquer si le lien s'affiche dans une nouvelle fenêtre ou dans la fenêtre courante. Ici, on indique simplement "lightbox". Le titre ("title") s'affichera en dessous de la photo. Bien entendu, vous pouvez agrémenter le lien en y ajoutant, par exemple, une image en vignette au lieu d'un simple texte. Ici, tout est possible.

Et voici le résultat (cliquez sur le lien)
L'intitulé du lien

Supposons maintenant que vous vouliez afficher non pas une image, mais toute une série avec une gestion de type diaporama pour passer d'un clic de l'une à l'autre.

La technique est tout à fait similaire et facile. Vous créez vos liens comme ci-dessus, mais vous complétez le tag "rel" en y ajoutant un nom de groupe. Par exemple :

<a href="http://www.xx.com/images/image1.png" rel="lightbox[groupe]" title="Le titre de l'image 1">L'intitulé du lien 1</a>
</br&gt;
<a href="http://www.xx.com/images/image2.png" rel="lightbox[groupe]" title="Le titre de l'image 2">L'intitulé du lien 2</a>

Et voici le résultat (cliquez sur l'un des liens)
L'intitulé du lien 1
L'intitulé du lien 2

Mots-clés : Lightbox, Diaporama, Javascript