Responsive PRO Image Gallery | CSS & JS Tutorial

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PRO Gallery</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body>
    <div class="gallery-container">
        <div class="thumbnails-box">
            <img src="/img/narava1.png" alt="Nature 1">
            <img src="/img/narava2.png" alt="Nature 2">
            <img src="/img/narava3.png" alt="Nature 3">
            <img src="/img/narava4.png" alt="Nature 4">
            <img src="/img/narava5.png" alt="Nature 5">
            <img src="/img/narava6.png" alt="Nature 6">
            <img src="/img/narava7.png" alt="Nature 7">
            <img src="/img/narava8.png" alt="Nature 8">
            <img src="/img/narava9.png" alt="Nature 9">
        </div>
    
        <div class="main-image-box">
            <img src="/img/nature1.png" alt="Main Display">
        </div>
    </div>
</body>
</html>

:root {
    --active-border: #007bff;
}

* {
    box-sizing: border-box;
}

.gallery-container {
    max-width: 1000px;
    margin: 20px auto;
    text-align: center;
}

.thumbnails-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.thumbnails-box img {
    width: 100px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    border: 3px solid transparent;
}

.thumbnails-box img:hover {
    transform: scale(1.05);
}

.thumbnails-box img.active {
    border-color: var(--active-border);
    box-shadow: 0 4px 10px rgba(0,123,255,0.3);
}

.main-image-box {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 10px;
}

.main-image-box img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    display: block;
    animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
    from { opacity: 0.5; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

@media (max-width: 600px) {
    .thumbnails-box img {
        width: 80px;
        height: 60px;
    }
}

document.addEventListener("DOMContentLoaded", function() {
    const thumbnails = document.querySelectorAll(".thumbnails-box img");
    const mainImg = document.querySelector(".main-image-box img");

    thumbnails.forEach(thumb => {
        thumb.addEventListener("click", function() {
            // Change the image source
            mainImg.src = this.src;
            
            // Remove the "active" class from all thumbnails and add it to the clicked one
            thumbnails.forEach(t => t.classList.remove("active"));
            this.classList.add("active");
        });
    });

    // Set the first image as active upon loading
    if(thumbnails.length > 0) {
        thumbnails[0].classList.add("active");
        mainImg.src = thumbnails[0].src;
    }
});

Responsive Gallery with Active Preview

Vadnica.org

Links

Support