Installation de Lightbox 2 en Francais

26,556 views
26,334 views

Published on

Tutoriel d'installation du script lightbox 2 en complément de l'article http://studio-adsense.blogspot.com/2008/03/lightbox-2-en-francais.html

Published in: Art & Photos, Technology
2 Comments
2 Likes
Statistics
Notes
No Downloads
Views
Total views
26,556
On SlideShare
0
From Embeds
0
Number of Embeds
8,082
Actions
Shares
0
Downloads
64
Comments
2
Likes
2
Embeds 0
No embeds

No notes for slide

Installation de Lightbox 2 en Francais

  1. 1. Installer lightbox 2 sur son site <ul><li>Lightbox 2 est un script qui permet d'afficher vos images de manière originale. </li></ul><ul><li>Comment l'installer ? </li></ul>
  2. 2. Télécharger les fichiers sur http://studio-adsense.blogspot.com/2008/03/lightbox-2-en-francais.html <ul><li>Cliquez sur la seconde image de la page ci-contre--> </li></ul><ul><li>Dézippez le dossier qui est une version francisée </li></ul>
  3. 3. Contenu du dossier <ul><li>Un dossier CSS </li></ul><ul><li>Un dossier images </li></ul><ul><li>Un dossier Javascript </li></ul><ul><li>Un document Web </li></ul>
  4. 4. Insertion dans votre projet <ul><li>Copier tous les dossiers à la racine de votre site en local ou sur votre serveur </li></ul><ul><li>Ne copiez pas la page index </li></ul><ul><li>Ci-contre le cas sur adonfff.com </li></ul>
  5. 5. Modification de vos pages <ul><li>Ouvrez votre document en mode texte et repérez un code comme ci-contre </li></ul><ul><li>Dans l'exemple, thumb-1.jpg est une miniature. Un clic sur cette image mène vers une page qui affiche image-1.jpg </li></ul>
  6. 6. Modification de vos pages <ul><li>Ajoutez l'attribut rel= « lightbox » à la balise a </li></ul><ul><li>Cette modification n'affecte en rien l'affichage. C'est l'avantage du script qui n'est pas intrusif. </li></ul>
  7. 7. Lien avec les scripts et les CSS <ul><li>Entre les balises head ajouter les 4 lignes ci-dessous : une ligne pour les CSS, 3 lignes pour les scripts et c'est fini ! </li></ul>
  8. 8. Variante <ul><li>Dans le cas où vous voulez mettre plusieurs photos en série, ajoutez l'attribut rel= « lightbox[mot_quelconque] » à chaque balise a qui entoure la balise img </li></ul>
  9. 9. Problèmes : point à vérifier ! <ul><li>La page est-elle correctement liée aux fichiers ? </li></ul><ul><li>Dans le cas ou votre page se trouve dans un sous dossier, ajouter ../ comme ci-dessous </li></ul><ul><li>Dans le doute mettez un lien absolu vers les fichiers. Ex : http://nom-de-domaine.com/js/prototype.js </li></ul>
  10. 10. Commentaires <ul><li>Si ce tutoriel vous a été utile, un commentaire sur mon blog est comme un remerciement http://studio-adsense.blogspot.com/ </li></ul><ul><li>N'hésitez pas également à mettre un commentaire si ça ne fonctionne pas ou si vous avez trouvé une coquille </li></ul><ul><li>Logiciels ayant servi à la réalisation de ce tuto : OOo Impress, SnagIt, NotePad++, Firefox </li></ul><ul><li>Script original : http://www.huddletogether.com/projects/lightbox2/ </li></ul>

×