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 !
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 :
Partie 2 - Dans le head
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.
Partie 3 - Dans le body
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) Remplacez
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