Installer lightbox 2 sur son site <ul><li>Lightbox 2 est un script qui permet d'afficher vos images de manière originale. ...
Télécharger les fichiers sur   http://studio-adsense.blogspot.com/2008/03/lightbox-2-en-francais.html <ul><li>Cliquez sur ...
Contenu du dossier <ul><li>Un dossier CSS  </li></ul><ul><li>Un dossier images </li></ul><ul><li>Un dossier Javascript </l...
Insertion dans votre projet <ul><li>Copier tous les dossiers à la racine de votre site en local ou sur votre serveur </li>...
Modification de vos pages <ul><li>Ouvrez votre document en mode texte et repérez un code comme ci-contre </li></ul><ul><li...
Modification de vos pages <ul><li>Ajoutez l'attribut rel= « lightbox » à la balise a </li></ul><ul><li>Cette modification ...
Lien avec les scripts et les CSS <ul><li>Entre les balises head ajouter les 4 lignes ci-dessous : une ligne pour les CSS, ...
Variante <ul><li>Dans le cas où vous voulez mettre plusieurs photos en série, ajoutez l'attribut rel= « lightbox[mot_quelc...
Problèmes : point à vérifier ! <ul><li>La page est-elle correctement liée aux fichiers ?  </li></ul><ul><li>Dans le cas ou...
Commentaires <ul><li>Si ce tutoriel vous a été utile, un commentaire sur mon blog est comme un remerciement http://studio-...
Prochain SlideShare
Chargement dans…5
×

Installation de Lightbox 2 en Francais

26 744 vues

Publié le

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

Publié dans : Art & Photos, Technologie
2 commentaires
2 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
26 744
Sur SlideShare
0
Issues des intégrations
0
Intégrations
8 134
Actions
Partages
0
Téléchargements
64
Commentaires
2
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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>

×