1) Mettre une simple image avec l'effet - Lightbox 2.04
Table des matières
Içi nous allons traiter l'effet lightbox sur une simple image. Le but étant de comprendre comment on procède avec les différents fichiers de l'archive que vous allez télécharger : Lightbox simple images.
Il n'y aura pas le fichier index.html, car c'est VOUS qui allez le créer !
Dans le dossier que vous venez de télécharger, commencez par ouvrir un nouveau document texte avec le bloc note. Que vous allez renommer index.html et enregistrez de suite, dans la foulée.
Dans le document, copier coller ceci :
Dans la balise <head>...</head>, En dessous de <title>Nouvelle page 1</title>, copier/coller ceci :
Vous allez inclure le code qui va suivre, à la suite en copier/coller. C'est le "Lightbox.CSS" qui va mettre en forme l'effet lightbox sur l'image.
Dans la balise <body>...</body>, copier/coller ceci :
Les images sont déjà présentes dans le dossier "images". Miniatures aussi ...
C'est l'attribut rel="lightbox" inséré dans le lien image qui va déclencher les JS placés précédemment dans la balise head.
1) Remplacer image-1.jpg (image large) etc ... par les vôtres. Et faites de même pour les thumb-1.jpg (miniatures en 100x40px).
2) title="Légende facultative ." : Cela vous permettra de mettre une légende à votre image.
Si vous avez des connaissances en CSS, il est possible de modifier les couleurs, fonds, dimensions etc... Dans le dossier CSS/lightbox.css.
Il n'y aura pas le fichier index.html, car c'est VOUS qui allez le créer !
Partie 1- Structure html
Dans le dossier que vous venez de télécharger, commencez par ouvrir un nouveau document texte avec le bloc note. Que vous allez renommer index.html et enregistrez de suite, dans la foulée.
Dans le document, copier coller ceci :
Code HTML :
Partie 2 - Dans le head
Dans la balise <head>...</head>, En dessous de <title>Nouvelle page 1</title>, copier/coller ceci :
Code HTML :
Vous allez inclure le code qui va suivre, à la suite en copier/coller. C'est le "Lightbox.CSS" qui va mettre en forme l'effet lightbox sur l'image.
Code HTML :
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
Partie 3 - Dans le body
Dans la balise <body>...</body>, copier/coller ceci :
Code HTML :
Les images sont déjà présentes dans le dossier "images". Miniatures aussi ...
C'est l'attribut rel="lightbox" inséré dans le lien image qui va déclencher les JS placés précédemment dans la balise head.
1) Remplacer image-1.jpg (image large) etc ... par les vôtres. Et faites de même pour les thumb-1.jpg (miniatures en 100x40px).
2) title="Légende facultative ." : Cela vous permettra de mettre une légende à votre image.
Astuce
Si vous avez des connaissances en CSS, il est possible de modifier les couleurs, fonds, dimensions etc... Dans le dossier CSS/lightbox.css.
Voir l'exemple
A voir aussi
- 2) Faire une galerie image par image- Lightbox 2.04
- 3) Faire une galerie sur un ensemble d'images - Lightbox 2.04