Créer une Lightbox d’Images légère en JavaScript Vanilla 

Créer une Lightbox d’Images légère en JavaScript Vanilla

Dans de nombreux projets web modernes, on a tendance à utiliser des bibliothèques lourdes pour des fonctionnalités pourtant simples à implémenter. La lightbox en est un bon exemple : afficher une image en plein écran avec navigation est tout à fait réalisable en JavaScript natif, sans dépendances externes.

Dans cet article, nous allons voir comment construire une lightbox légère, réutilisable et performante en utilisant uniquement JavaScript, HTML et CSS.

🎯 Objectif de la Lightbox

L’objectif est d’offrir une expérience utilisateur fluide pour la consultation des images :

• Cliquer sur une image pour l’ouvrir en plein écran

• Naviguer entre les images (précédent / suivant)

• Utiliser le clavier :

  • ← et → pour naviguer

  • Échap pour fermer

• Fermer la lightbox en cliquant en dehors de l’image

• Afficher un compteur (ex : 2 / 15)

• Ajouter un effet de zoom au survol avant ouverture

⚡ Aucune structure HTML requise

Un point important de cette implémentation : aucun markup HTML n’est nécessaire dans la page.

La lightbox est totalement autonome :

• pas de <div> à ajouter dans le HTML

• pas de structure de galerie à préparer

• pas de boutons à intégrer dans la page

👉 Il suffit simplement d’avoir des images dans le DOM.

Tout le reste est créé dynamiquement en JavaScript.

🧱 Une architecture simple et modulaire

Toute la logique est encapsulée dans une classe JavaScript ES6 :

export default class ImageLightbox {

Cette approche présente plusieurs avantages :

• Code organisé et isolé

• Facilement réutilisable dans différents projets

• Pas de dépendance externe

• Facile à maintenir et à étendre

🔎 1. Détection automatique des images

La lightbox commence par récupérer toutes les images correspondant à un sélecteur CSS :

this.images = Array.from(root.querySelectorAll(this.selector));

Par défaut, on cible par exemple :

".rich-text img, .card img, img.zoomable"

Chaque image détectée est ensuite préparée pour interagir avec la lightbox :

• ajout d’un index

• marquage pour éviter les doublons

• ajout du curseur “zoom-in”

• ajout d’un événement click

🖱️ 2. Envelopper les images pour l’effet hover

Pour améliorer l’expérience visuelle, chaque image est automatiquement entourée d’un wrapper :

const wrapper = document.createElement("div");
wrapper.className = "lightbox-hover";

Ce wrapper permet d’ajouter :

• un effet de zoom au survol

• un overlay sombre

• une icône de loupe (via mask SVG)

Tout cela uniquement en CSS, sans JavaScript supplémentaire.

🖼️ 3. Création dynamique de l’overlay

L’un des éléments clés est l’overlay de la lightbox, créé directement en JavaScript :

this.overlay = document.createElement("div");
this.overlay.className = "lightbox-overlay";

Puis son contenu est injecté dynamiquement :

this.overlay.innerHTML = `
  <button class="lightbox-close">×</button>
  <button class="lightbox-prev">‹</button>
  <button class="lightbox-next">›</button>
  <div class="lightbox-counter"></div>
  <img class="lightbox-image" />
`;

👉 Résultat : aucun HTML statique n’est requis dans le projet.

🚀 4. Ouverture d’une image

Lorsqu’une image est cliquée :

this.openAt(index);

Le système :

• récupère l’image correspondante

• nettoie l’URL (sans paramètres ?)

• affiche l’image dans la lightbox

• met à jour le compteur

• active l’overlay

⌨️ 5. Navigation intuitive

La navigation est simple et fluide :

• bouton “précédent” → image précédente

• bouton “suivant” → image suivante

• clavier :

  • ArrowLeft → précédent

  • ArrowRight → suivant

  • Escape → fermer

Le tout est géré globalement :

document.addEventListener("keydown", (e) => {

📊 6. Affichage du compteur

Un petit détail important pour l’expérience utilisateur :

${this.currentIndex + 1} / ${this.images.length}

Cela permet de savoir où l’on se situe dans la galerie.

🎨 7. Le CSS : une expérience fluide et moderne

Le CSS joue un rôle essentiel dans le rendu :

• overlay sombre avec transition

• animation légère de zoom

• boutons flottants

• effet de survol sur les images

• icône de loupe intégrée via mask-image

Exemple d’effet d’apparition :

.lightbox-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

✨ 8. Résultat final

On obtient une lightbox :

• légère

• rapide

• sans dépendance

• sans aucun HTML requis

• facilement intégrable dans n’importe quel projet

• compatible avec du contenu dynamique

🧠 Conclusion

Ce type d’implémentation montre qu’il est souvent inutile de dépendre de bibliothèques externes pour des fonctionnalités UI courantes. Avec un peu de JavaScript moderne et du CSS bien pensé, on peut obtenir un résultat propre, performant et totalement personnalisable.

Les fichiers sources :

Le .Scss spécifique au lightbox

Le Javascript du LightBox