An Efficient Way to Display Images and Media

A Lightbox is a popular user interface technique that allows images, videos, or other media on a web page to stand out in the foreground of the screen while dimming the rest of the page. It is primarily used to highlight and enlarge content without the need to leave the current page.

EXAMPLE

                        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body>
    <div class="gallery" role="region" aria-label="Image gallery">
        <div class="gallery-item" tabindex="0">
            <img src="/img/narava1.png" alt="Autumn forest" loading="lazy">
        </div>
        <div class="gallery-item" tabindex="0">
            <img src="/img/narava3.png" alt="Mountain stream" loading="lazy">
        </div>
        <div class="gallery-item" tabindex="0">
            <img src="/img/narava6.png" alt="Sunset" loading="lazy">
        </div>
        <div class="gallery-item" tabindex="0">
            <img src="/img/narava9.png" alt="Spring meadow" loading="lazy">
        </div>
    </div>

    <div class="lightbox" role="dialog" aria-label="Lightbox gallery">
        <button class="lightbox-close" aria-label="Close gallery">&times;</button>
        <div class="lightbox-content">
            <div class="main-image-container">
                <button class="lightbox-controls lightbox-prev" aria-label="Previous image">&#10094;</button>
                <img class="lightbox-image" src="" alt="" loading="lazy">
                <button class="lightbox-controls lightbox-next" aria-label="Next image">&#10095;</button>
                <div class="lightbox-caption"></div>
            </div>
            <div class="thumbnails" role="tablist"></div>
        </div>
    </div>
</body>
</html>
        
                    

                        .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.gallery-item {
    position: relative;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    filter: grayscale(0.6);
    transition: all 0.3s ease;
}

.gallery-item:hover {
    filter: grayscale(0);
    transform: scale(1.05);
}

.gallery-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Lightbox styling elements */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lightbox.active {
    display: flex;
    opacity: 1;
}

.lightbox-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.main-image-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
    margin-bottom: 20px;
}

.lightbox-image {
    max-width: 100%;
    max-height: 70vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Thumbnail gallery */
.thumbnails {
    display: flex;
    gap: 10px;
    padding: 10px;
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.3) transparent;
}

.thumbnail {
    width: 100px;
    height: 70px;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    object-fit: cover;
}

.thumbnail:hover {
    opacity: 1;
}

.thumbnail.active {
    opacity: 1;
    border-color: #fff;
}

/* Control buttons */
.lightbox-controls button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white !important;
    padding: 15px 20px;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.3s;
    z-index: 2;
}

/* Common properties for both buttons */
.lightbox-prev,
.lightbox-next {
    background-color: transparent;
    border: none !important;
    color: white !important;
    font-size: 30px;
    padding: 15px 25px;
    transition: all 0.3s ease;
    opacity: 1;
}

/* Specific positions */
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

/* Common hover effects */
.lightbox-prev:hover,
.lightbox-next:hover {
    opacity: 1;
    cursor: pointer;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white !important;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    transition: all 0.3s;
    z-index: 2;
}

.lightbox-close:hover {
    background: rgba(255, 0, 0, 0.5);
    transform: rotate(90deg);
}

.lightbox-caption {
    color: white;
    text-align: center;
    padding: 10px;
    font-size: 1.1em;
    position: absolute;
    bottom: 100px;
    left: 0;
    right: 0;
}

/* Responsive design for mobile devices */
@media (max-width: 768px) {
    .gallery {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 10px;
    }

    .main-image-container {
        width: 100%;
        padding: 0 40px;
    }

    .lightbox-image {
        max-height: 50vh;
        max-width: 100%;
    }
    
    .lightbox-prev { left: 5px; }
    .lightbox-next { right: 5px; }

    .thumbnails {
        gap: 5px;
    }

    .thumbnail {
        width: 80px;
        height: 60px;
    }

    .lightbox-controls button {
        padding: 10px 15px;
    }

    .lightbox-caption {
        font-size: 14px;
        bottom: 80px;
    }
}

@media (max-width: 480px) {
    .lightbox-content {
        padding: 10px;
        overflow: hidden;
    }

    .main-image-container {
        padding: 0;
    }

    .lightbox-image {
        max-width: 95vw;
        max-height: 45vh;
        object-fit: contain;
    }

    .lightbox-controls button {
        background: rgba(0, 0, 0, 0.3);
        padding: 8px 12px;
    }
}
        
                    

                        class Lightbox {
    constructor() {
        this.images = Array.from(document.querySelectorAll('.gallery-item img'));
        this.lightbox = document.querySelector('.lightbox');
        this.lightboxImg = document.querySelector('.lightbox-image');
        this.caption = document.querySelector('.lightbox-caption');
        this.thumbnailsContainer = document.querySelector('.thumbnails');
        this.currentIndex = 0;
        
        // ADDED: Initial values for swipe
        this.touchStartX = 0;
        this.touchEndX = 0;
        
        this.createThumbnails();
        this.initializeEvents();
    }

    createThumbnails() {
        this.thumbnailsContainer.innerHTML = '';
        this.images.forEach((img, index) => {
            const thumb = document.createElement('img');
            thumb.src = img.src;
            thumb.alt = `Thumbnail: ${img.alt}`;
            thumb.classList.add('thumbnail');
            thumb.setAttribute('role', 'tab');
            thumb.addEventListener('click', () => this.showImage(index));
            this.thumbnailsContainer.appendChild(thumb);
        });
    }

    initializeEvents() {
        // Click on gallery items
        this.images.forEach((img, index) => {
            img.parentElement.addEventListener('click', () => this.openLightbox(index));
            img.parentElement.addEventListener('keydown', (e) => {
                if (e.key === 'Enter') this.openLightbox(index);
            });
        });

        // Control buttons
        document.querySelector('.lightbox-close').addEventListener('click', () => this.closeLightbox());
        document.querySelector('.lightbox-prev').addEventListener('click', () => this.navigate(-1));
        document.querySelector('.lightbox-next').addEventListener('click', () => this.navigate(1));

        // Keyboard navigation
        document.addEventListener('keydown', (e) => {
            if (!this.lightbox.classList.contains('active')) return;
            
            switch(e.key) {
                case 'Escape': this.closeLightbox(); break;
                case 'ArrowLeft': this.navigate(-1); break;
                case 'ArrowRight': this.navigate(1); break;
            }
        });

        // ADDED: Swipe support on mobile devices
        this.lightbox.addEventListener('touchstart', (e) => {
            this.touchStartX = e.changedTouches[0].screenX;
        }, { passive: true });

        this.lightbox.addEventListener('touchend', (e) => {
            this.touchEndX = e.changedTouches[0].screenX;
            this.handleSwipe();
        }, { passive: true });

        // Close when clicking outside the image
        this.lightbox.addEventListener('click', (e) => {
            if (e.target === this.lightbox) this.closeLightbox();
        });
    }
    
    handleSwipe() {
        const threshold = 50; // Minimum swipe distance in pixels
        if (this.touchEndX < this.touchStartX - threshold) {
            this.navigate(1); // Swipe left -> next image
        }
        if (this.touchEndX > this.touchStartX + threshold) {
            this.navigate(-1); // Swipe right -> previous image
        }
    }

    openLightbox(index) {
        this.currentIndex = index;
        this.updateImage();
        this.lightbox.classList.add('active');
        document.body.style.overflow = 'hidden';
    }

    closeLightbox() {
        this.lightbox.classList.remove('active');
        document.body.style.overflow = '';
    }

    navigate(direction) {
        this.currentIndex = (this.currentIndex + direction + this.images.length) % this.images.length;
        this.updateImage();
    }

    showImage(index) {
        this.currentIndex = index;
        this.updateImage();
    }

    updateImage() {
        const currentImg = this.images[this.currentIndex];
        this.lightboxImg.src = currentImg.src;
        this.lightboxImg.alt = currentImg.alt;
        this.caption.textContent = currentImg.alt;

        // Update active thumbnail
        const thumbnails = this.thumbnailsContainer.querySelectorAll('.thumbnail');
        thumbnails.forEach((thumb, index) => {
            thumb.classList.toggle('active', index === this.currentIndex);
        });
    }
}

// Initialization on DOM load
document.addEventListener('DOMContentLoaded', () => new Lightbox());
        
                    

RESULT

Lightbox: Elegant Presentation of Images and Media