lightbox

Lightbox

Lightbox je priljubljena tehnika uporabniškega vmesnika, ki omogoča, da slike, videoposnetki ali drugi mediji na spletni strani izstopijo v ospredje na zaslonu, hkrati pa zatemni preostanek strani. Uporablja se predvsem za poudarjanje in povečanje vsebine brez potrebe po zapuščanju trenutne strani.

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>Lightbox</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

* {
            box-sizing: border-box;
        }

.row {
            display: flex;
            justify-content: center;
            gap: 16px;
            flex-wrap: wrap;
        }

.row .column {
            width: 200px;
            cursor: pointer;
            filter: grayscale(1);
            transition: all 0.3s ease;
        }

.row .column:hover {
            filter: grayscale(0);
            transform: scale(1.05);
        }

.row img {
            width: 100%;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }

.modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            z-index: 1000;
            animation: fadeIn 0.5s;
        }

@keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

.modalContent {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 90%;
            color: white;
            position: relative;
        }

.projekcija {
            max-width: 100%;
            height: 60%;
        }

.projekcija img {
            max-width: 100%;
            max-height: 100%;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
            transition: transform 0.3s ease;
        }

.projekcija img:hover {
            transform: scale(1.02);
        }

.thumbnails {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 10px;
            overflow-x: auto;
            max-width: 100%;
            padding-bottom: 10px;
        }

.thumbnails img {
            width: 100px;
            cursor: pointer;
            filter: grayscale(1);
            transition: all 0.3s ease;
            border: 2px solid transparent;
            border-radius: 4px;
        }

.thumbnails img:hover, .thumbnails img.active {
            filter: grayscale(0);
            border-color: white;
        }

.prev, .next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            color: white;
            font-weight: bold;
            font-size: 24px;
            padding: 10px;
            border-radius: 50%;
            user-select: none;
            background-color: rgba(0, 0, 0, 0.5);
            transition: background-color 0.3s;
            z-index: 1000;
        }

.prev:hover, .next:hover {
            background-color: rgba(255, 255, 255, 0.8);
            color: #333;
        }

.prev {
            left: 5%;
            transform: translateY(-50%);
        }

.next {
            right: 5%;
            transform: translateY(-50%);
        }

.close {
            position: absolute;
            top: 20px;
            right: 30px;
            color: white;
            font-size: 30px;
            font-weight: bold;
            cursor: pointer;
            transition: color 0.3s;
        }

.close:hover {
            color: red;
        }

#caption {
            margin-top: 10px;
            font-size: 18px;
            text-align: center;
            color: #ccc;
        }

@media screen and (max-width: 600px) {
            .modalContent {
                width: 100%;
                height: auto;
                margin: 0;
                padding: 0;
            }

.prev, .next {
                font-size: 20px;
                top: 45%;
            }

.projekcija {
                max-width: 100%;
                height: auto;
            }

.projekcija img {
                max-width: 100%;
                height: auto;
            }

.thumbnails {
                display: block;
            }

.thumbnails img {
                display: block;
                width: 80px;
            }

.close {
                top: 10px;
                right: 20px;
                z-index: 1000;
            }
        }
    </style>
</head>
<body>

function openModal() {
        const modal = document.getElementById("myModal");
        modal.style.display = "block";
        displayThumbnails();
        showSlides(slideIndex);
    }

function closeModal() {
        console.log("Zapiram modal...");
        const modal = document.getElementById("myModal");
        modal.style.display = "none"; // Izklopi modal
    }

function plusSlides(n) {
        slideIndex += n;
        if (slideIndex > images.length) slideIndex = 1;
        if (slideIndex < 1) slideIndex = images.length;
        showSlides(slideIndex);
    }

function currentSlide(n) {
        slideIndex = n;
        showSlides(slideIndex);
    }

function showSlides(n) {
        const displayedImage = document.getElementById("displayedImage");
        const captionText = document.getElementById("caption");

displayedImage.src = images[n - 1].src;
        displayedImage.alt = images[n - 1].alt;
        captionText.innerHTML = images[n - 1].alt;

const thumbnails = document.querySelectorAll(".thumbnails img");
        thumbnails.forEach((thumbnail, index) => {
            thumbnail.classList.toggle("active", index === n - 1);
        });
    }

function displayThumbnails() {
        const thumbnailsContainer = document.getElementById("thumbnailsContainer");
        thumbnailsContainer.innerHTML = "";

images.forEach((image, index) => {
            const thumbnail = document.createElement("img");
            thumbnail.src = image.src;
            thumbnail.alt = image.alt;
            thumbnail.onclick = () => currentSlide(index + 1);
            thumbnailsContainer.appendChild(thumbnail);
        });
    }
</script>

</body>
</html>