JSFiddle - React, Tailwind, and code Playground

by Jordan Sayner

HTML

<div class="gallery">
        <img src="image1.jpg" alt="Image 1">
        <img src="image2.jpg" alt="Image 2">
        <img src="image3.jpg" alt="Image 3">
    </div>

    <div class="lightbox" id="lightbox">
        <span class="close">&times;</span>
        <img src="" alt="Lightbox Image" id="lightbox-img">
    </div>

CSS

/* Basic styling for the lightbox */
        body {
            font-family: Arial, sans-serif;
        }
        
        .gallery img {
            width: 200px;
            margin: 10px;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .gallery img:hover {
            transform: scale(1.05);
        }

        .lightbox {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease;
        }

        .lightbox img {
            max-width: 90%;
            max-height: 90%;
        }

        .lightbox.visible {
            opacity: 1;
            visibility: visible;
        }

        .lightbox .close {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 2rem;
            color: white;
            cursor: pointer;
        }

JavaScript

// JavaScript to handle the lightbox functionality
        document.addEventListener('DOMContentLoaded', function() {
            const galleryImages = document.querySelectorAll('.gallery img');
            const lightbox = document.getElementById('lightbox');
            const lightboxImg = document.getElementById('lightbox-img');
            const closeBtn = document.querySelector('.lightbox .close');

            galleryImages.forEach(image => {
                image.addEventListener('click', function() {
                    lightboxImg.src = this.src;
                    lightbox.classList.add('visible');
                });
            });

            closeBtn.addEventListener('click', function() {
                lightbox.classList.remove('visible');
            });

            // Close lightbox when clicking outside the image
            lightbox.addEventListener('click', function(e) {
                if (e.target !== lightboxImg) {
                    lightbox.classList.remove('visible');
                }
            });
        });