image gallery

10 months ago · 6c7d258117
1 changed files with 95 additions and 0 deletions
--- a/out/index.html
+++ b/out/index.html
@ -0,0 +1,95 @@
 <!DOCTYPE html>
 <html>
 <head>
    <title>Image Gallery</title>
    <style>
        .gallery-img {
            width: 100%; 
            height: auto;
            object-fit: cover;
            border-radius: 8px;
            cursor: pointer;
        }
        #gallery {
            display: grid;
            grid-gap: 10px;
            padding: 10px;
            margin: auto;
        }
        #lightbox {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            align-items: center;
            justify-content: center;
        }
        #lightbox img {
            max-width: 80%;
            max-height: 80%;
        }
        #lightbox #caption {
            color: white;
            margin-top: 20px;
        }
    </style>
 </head>
 <body>
    <header>
        <h1>Image Gallery</h1>
    </header>
    <main>
        <input type="range" id="layoutSlider" min="1" max="10" value="5">
        <div id="gallery"></div>
    </main>
    <!-- Lightbox element -->
    <div id="lightbox" onclick="closeLightbox()">
        <img id="lightbox-img" src="#" alt="Preview">
        <div id="caption"></div>
    </div>
    <script>
        function loadImages() {
            var gallery = document.getElementById('gallery');
            for (var i = 0; i <= 199; i++) {
                let imageName = 'v' + i + '.png';
                let img = document.createElement('img');
                img.src = imageName;
                img.onerror = function() { this.style.display = 'none'; }; // Hide if the image fails to load
                img.onload = function() { this.classList.add('gallery-img'); this.onclick = function() { openLightbox(this.src, this.src.split('/').pop()); }; }; // Only display and set click event if loaded successfully
                gallery.appendChild(img);
            }
        }
        function updateGridLayout(columns) {
            var gallery = document.getElementById('gallery');
            gallery.style.gridTemplateColumns = `repeat(${columns}, 1fr)`;
        }
        document.getElementById('layoutSlider').addEventListener('input', function() {
            updateGridLayout(this.value);
        });
        function openLightbox(src, filename) {
            document.getElementById('lightbox').style.display = 'flex';
            document.getElementById('lightbox-img').src = src;
            document.getElementById('caption').textContent = filename;
        }
        function closeLightbox() {
            document.getElementById('lightbox').style.display = 'none';
        }
        window.onload = function() {
            loadImages();
            updateGridLayout(document.getElementById('layoutSlider').value);
        };
    </script>
 </body>
 </html>