Voici la procédure simplifiée pour ajouter l’effet « Lightbox » à vos pages web.
1. Télécharger les éléments nécessaires
(Version de Lightbox : v2.11.3)
2. Placer les éléments dans votre dossier racine
- lightbox.min.css doit être dans votre dossier css
- lightbox.min.js doit être dans votre dossier js
- les images doivent être dans un dossier images
3. Charger le script dans votre page web
A. Charger la feuille de style dans le <head>:
<link href="css/lightbox.min.css" rel="stylesheet" />B. Si la bibliothèque jQuery n’est pas encore utilisée dans votre page, vous devez l’appeler juste avant </body> et avant tout autre script
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>C. Charger le script de lightbox juste après jQuery.
<script src="js/lightbox.min.js"></script>4. Activer le script sur les images désirées
Créer un lien sur la petite image que vous voulez agrandir et ajouter data-lightbox="nomdemagalerie"
<a href="images/magrandeimage.jpg" data-lightbox="galerie1"><img src="images/mapetiteimage.jpg"></a>Si vous désirez une navigation entre les images, il suffit de donner à plusieurs images le même data-lightbox
Dans l’exemple ci-dessous, les 3 premières images sont associées en galerie et vous pourrez naviguer entre elles dans la lightbox. Par contre la quatrième est seule.
<a href="images/image1.jpg" data-lightbox="galerie1"><img src="images/vignette1.jpg"></a>
<a href="images/image2.jpg" data-lightbox="galerie1"><img src="images/vignette2.jpg"></a>
<a href="images/image3.jpg" data-lightbox="galerie1"><img src="images/vignette3.jpg"></a>
<a href="images/image4.jpg" data-lightbox="galerie2"><img src="images/vignette4.jpg"></a>5. Options
Une légende peut être affichée sous l’image
<a href="images/image1.jpg" data-lightbox="galerie1" data-title="La légende de mon image"><img src="images/vignette4.jpg"></a>Une balise alt peut être appliquée aux grande images pour des raisons de référencement par exemple
<a href="images/image1.jpg" data-lightbox="galerie1" data-title="La légende de mon image" data-alt="Description texte de mon image"><img src="images/vignette4.jpg"></a>6. Astuce
Il est possible d’afficher plusieurs images à partir d’une seule en « trichant » un peu sur le script et en ajoutant des liens vides qui sont inclus dans la même galerie.
<a href="images/image1.jpg" data-lightbox="galerie1"><img src="images/vignette1.jpg"></a>
<a href="images/image2.jpg" data-lightbox="galerie1"></a>
<a href="images/image3.jpg" data-lightbox="galerie1"></a>7. Liens utiles
Vous y trouverez ici beaucoup plus d’informations sur ce script : https://lokeshdhakar.com/projects/lightbox2/
D’autres effets Lightbox :