1. Installer lightbox 2 sur son site

• Lightbox 2 est un script qui permet d'afficher vos images de manire originale.

Comment l'installer ?

2. Tlcharger les fichiers sur http://studio-adsense.blogspot.com/2008/03/lightbox-2-en-francais.html

Cliquez sur la seconde image de la page ci-contre-->

Dzippez le dossier qui est une version francise

3. Contenu du dossier

Un dossier CSS

Un dossier images

Un dossier Javascript

Un document Web

4. Insertion dans votre projet

Copier tous les dossiers la racine de votre site en local ou sur votre serveur

Ne copiez pas la page index

Ci-contre le cas sur adonfff.com

5. Modification de vos pages

Ouvrez votre document en mode texte et reprez un code comme ci-contre

Dans l'exemple,thumb-1.jpg est une miniature. Un clic sur cette image mne vers une page qui affiche image-1.jpg

6. Modification de vos pages

Ajoutez l'attribut rel=lightbox la balise a

Cette modification n'affecte en rien l'affichage. C'est l'avantage du script qui n'est pas intrusif.

7. Lien avec les scripts et les CSS

Entre les balises head ajouter les 4 lignes ci-dessous : une ligne pour les CSS, 3 lignes pour les scripts et c'est fini !

8. Variante

Dans le cas o vous voulez mettre plusieurs photos en srie, ajoutez l'attribut rel=lightbox[mot_quelconque] chaque balise a qui entoure la balise img

9. Problmes : point vrifier !

La page est-elle correctement lie aux fichiers ?

Dans le cas ou votre page se trouve dans un sous dossier, ajouter ../ comme ci-dessous

Dans le doute mettez un lien absolu vers les fichiers. Ex : http://nom-de-domaine.com/js/prototype.js

10. Commentaires

Si ce tutoriel vous a t utile, un commentaire sur mon blog est comme un remerciement http://studio-adsense.blogspot.com/

N'hsitez pas galement mettre un commentaire si a ne fonctionne pas ou si vous avez trouv une coquille

Logiciels ayant servi la ralisation de ce tuto : OOo Impress, SnagIt, NotePad++, Firefox

Script original :http://www.huddletogether.com/projects/lightbox2/