Odzivna PRO Galerija Slik | CSS & JS Tutorial

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>PRO Galerija</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="littleImg">
            <img src="/img/narava1.png" alt="Narava 1">
            <img src="/img/narava2.png" alt="Narava 2">
            <img src="/img/narava3.png" alt="Narava 3">
            <img src="/img/narava4.png" alt="Narava 4">
            <img src="/img/narava5.png" alt="Narava 5">
            <img src="/img/narava6.png" alt="Narava 6">
            <img src="/img/narava7.png" alt="Narava 7">
            <img src="/img/narava8.png" alt="Narava 8">
            <img src="/img/narava9.png" alt="Narava 9">
        </div>
    
        <div class="bigImg">
            <img src="/img/narava1.png" alt="Glavni prikaz">
        </div>
    </div>
</body>
</html>

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

* {
    box-sizing: border-box;
}

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

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

.littleImg 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;
}

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

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

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

.bigImg 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) {
    .littleImg img {
        width: 80px;
        height: 60px;
    }
}

document.addEventListener("DOMContentLoaded", function() {
    const thumbnails = document.querySelectorAll(".littleImg img");
    const mainImg = document.querySelector(".bigImg img");

    thumbnails.forEach(thumb => {
        thumb.addEventListener("click", function() {
            // Zamenjaj vir slike
            mainImg.src = this.src;
            
            // Odstrani "active" razred vsem in ga dodaj kliknjeni
            thumbnails.forEach(t => t.classList.remove("active"));
            this.classList.add("active");
        });
    });

    // Nastavi prvo sliko kot aktivno ob nalaganju
    if(thumbnails.length > 0) {
        thumbnails[0].classList.add("active");
        mainImg.src = thumbnails[0].src;
    }
});

Odzivna galerija z aktivnim prikazom

Vadnica.org

Povezave

Podpora