Créez une Lightbox Moderne et Puissante en 5 Étapes Faciles avec HTML, CSS et JavaScript

Les lightbox sont parfaites pour afficher des images en pleine page de manière élégante. Dans ce tutoriel, je vais vous montrer comment créer une lightbox moderne et responsive, étape par étape, avec HTML, CSS et JavaScript. On va même utiliser des images gratuites directement tirées de Pixabay !

LIGHTBOX
LIGHTBOX

Voici le code complet, prêt à être utilisé.

Code Complet : Lightbox Moderne

Copiez-collez ce code dans un fichier index.html, et ouvrez-le dans votre navigateur pour voir la magie opérer !

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Créez une lightbox moderne et responsive avec des boutons précédent/suivant et des images locales. Tutoriel pour débutants.">
    <meta name="keywords" content="lightbox, galerie d'images, HTML, CSS, JavaScript, tutoriel débutant, responsive">
    <meta name="author" content="Technely">
    <title>Lightbox Moderne avec Navigation</title>
    <style>
        /* Reset de base */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            padding: 20px;
            text-align: center;
            line-height: 1.6;
        }

        h1 {
            margin-bottom: 20px;
            color: #333;
        }

        p {
            margin-bottom: 30px;
            color: #555;
        }

        /* Styles pour la galerie */
        .gallery {
            display: flex;
            gap: 10px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .gallery img {
            width: 100%;
            max-width: 200px;
            height: auto;
            object-fit: cover;
            border-radius: 8px;
            cursor: pointer;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .gallery img:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        }

        /* Styles pour la lightbox */
        .lightbox {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            justify-content: center;
            align-items: center;
            flex-direction: column;
            z-index: 10;
        }

        .lightbox img {
            max-width: 90%;
            max-height: 80%;
            border-radius: 8px;
        }

        .lightbox .close, 
        .lightbox .prev, 
        .lightbox .next {
            position: absolute;
            font-size: 30px;
            color: white;
            cursor: pointer;
            background: none;
            border: none;
            font-weight: bold;
        }

        .lightbox .close {
            top: 20px;
            right: 20px;
        }

        .lightbox .prev {
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
        }

        .lightbox .next {
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
        }

        /* Responsivité */
        @media (max-width: 768px) {
            .gallery img {
                max-width: 100px;
            }

            .lightbox img {
                max-width: 95%;
            }
        }
    </style>
</head>
<body>
    <h1>Lightbox Moderne avec Navigation</h1>
    <p>Apprenez à créer une lightbox élégante avec des boutons de navigation et des images responsives pour tous les écrans.</p>
    
    <!-- Galerie d'images -->
    <div class="gallery">
        <img src="1.jpg" alt="Image 1">
        <img src="2.jpg" alt="Image 2">
        <img src="3.jpg" alt="Image 3">
		<img src="4.jpg" alt="Image 4">
		<img src="5.jpg" alt="Image 5">
		<img src="6.jpg" alt="Image 6">
		<img src="7.jpg" alt="Image 7">
		<img src="8.jpg" alt="Image 8">
		<img src="9.jpg" alt="Image 9">
		<img src="10.jpg" alt="Image 10">
    </div>
    
    <!-- Lightbox -->
    <div class="lightbox">
        <button class="close" aria-label="Fermer la lightbox">×</button>
        <button class="prev" aria-label="Image précédente">←</button>
        <img class="lightbox-image" src="" alt="Image agrandie">
        <button class="next" aria-label="Image suivante">→</button>
    </div>

    <script>
        // Sélection des éléments
        const galleryImages = document.querySelectorAll('.gallery img');
        const lightbox = document.querySelector('.lightbox');
        const lightboxImage = document.querySelector('.lightbox-image');
        const closeBtn = document.querySelector('.close');
        const prevBtn = document.querySelector('.prev');
        const nextBtn = document.querySelector('.next');
        let currentIndex = 0;

        // Fonction pour ouvrir la lightbox
        const openLightbox = (index) => {
            currentIndex = index;
            lightbox.style.display = 'flex';
            updateLightboxImage();
        };

        // Fonction pour mettre à jour l'image de la lightbox
        const updateLightboxImage = () => {
            lightboxImage.src = galleryImages[currentIndex].src;
            lightboxImage.alt = galleryImages[currentIndex].alt;
        };

        // Fonction pour fermer la lightbox
        const closeLightbox = () => {
            lightbox.style.display = 'none';
        };

        // Fonction pour aller à l'image précédente
        const showPrevImage = () => {
            currentIndex = (currentIndex - 1 + galleryImages.length) % galleryImages.length;
            updateLightboxImage();
        };

        // Fonction pour aller à l'image suivante
        const showNextImage = () => {
            currentIndex = (currentIndex + 1) % galleryImages.length;
            updateLightboxImage();
        };

        // Événements pour chaque image de la galerie
        galleryImages.forEach((img, index) => {
            img.addEventListener('click', () => openLightbox(index));
        });

        // Événements des boutons
        closeBtn.addEventListener('click', closeLightbox);
        prevBtn.addEventListener('click', showPrevImage);
        nextBtn.addEventListener('click', showNextImage);

        // Fermer la lightbox en cliquant à l'extérieur de l'image
        lightbox.addEventListener('click', (e) => {
            if (e.target === lightbox && e.target !== lightboxImage) {
                closeLightbox();
            }
        });
    </script>
</body>
</html>
Show

Explications :

1. Section HTML

  • La galerie est composée d’un div contenant des images avec des liens directs vers Pixabay.
  • Une section lightbox s’affiche lorsqu’une image est cliquée.

2. CSS

  • Les images de la galerie ont un effet « zoom » au survol pour améliorer l’interactivité.
  • La lightbox utilise un display: flex pour centrer l’image verticalement et horizontalement.

3. JavaScript

  • Chaque image peut être cliquée pour afficher la lightbox.
  • Un bouton « fermer » et un clic à l’extérieur de l’image permettent de masquer la lightbox.

Optimisation SEO

  • Utilisez des balises alt descriptives pour les images (important pour l’accessibilité et le référencement).
  • Mettez une description et des mots-clés pertinents dans les balises <meta>.

Instructions supplémentaires

Pour utiliser ce projet, vous devez placer les images 1.jpg, 2.jpg et 3.jpg dans le même dossier que le fichier index.html. Les fichiers sont déjà prêts dans un dossier compressé que vous pouvez télécharger ci-dessous. Assurez-vous d’extraire le contenu et de l’ouvrir dans un navigateur pour visualiser la galerie et la lightbox en action.

Publications similaires