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>