update site

10 months ago · 96ea02bca9
1 changed files with 20 additions and 20 deletions
--- a/out/index.html
+++ b/out/index.html
@ -1,21 +1,26 @@
 <!DOCTYPE html>
 <html>
+
 <head>
    <title>Image Gallery</title>
    <style>
        .gallery-img {
-            width: 100%; 
+            width: 100%;
            height: auto;
            object-fit: cover;
            border-radius: 8px;
            cursor: pointer;
        }
+
        #gallery {
            display: grid;
+            grid-template-columns: repeat(10, 1fr);
+            /* 10 equal columns */
            grid-gap: 10px;
            padding: 10px;
            margin: auto;
        }
+
        #lightbox {
            display: none;
            position: fixed;
@ -28,10 +33,12 @@
            justify-content: center;
            z-index: 1000;
        }
+
        #lightbox img {
            max-width: 80%;
            max-height: 80%;
        }
+
        #lightbox #caption {
            color: white;
            margin-top: 20px;
@ -43,12 +50,12 @@
        }
    </style>
 </head>
+
 <body>
    <header>
        <h1>Image Gallery</h1>
    </header>
    <main>
-        <input type="range" id="layoutSlider" min="1" max="20" value="10" width="100%">
        <div id="gallery"></div>
    </main>

@ -65,14 +72,14 @@
        function loadImages() {
            var gallery = document.getElementById('gallery');

-            for (var i = 0; i <= 199; i++) {
+            for (var i = 175; i < 275; i++) { // Changed from i <= 100 to i < 100
                let imageName = 'v' + i + '.png';
                let img = document.createElement('img');
                img.src = imageName;
-                img.onerror = function() { this.style.display = 'none'; };
-                img.onload = function() {
+                img.onerror = function () { this.style.display = 'none'; };
+                img.onload = function () {
                    this.classList.add('gallery-img');
-                    this.onclick = function() {
+                    this.onclick = function () {
                        openLightbox(this.src, this.src.split('/').pop());
                        currentImageIndex = imageArray.indexOf(this);
                    };
@ -82,14 +89,7 @@
                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';
@ -102,7 +102,7 @@
        }

        // Keyboard navigation for lightbox
-        document.onkeydown = function(e) {
+        document.onkeydown = function (e) {
            if (document.getElementById('lightbox').style.display === 'flex') {
                if (e.key === 'ArrowRight') {
                    navigateLightbox(1); // Next image
@ -130,10 +130,10 @@
                navigateLightbox(direction);
            }
        }
-        window.onload = function() {
-        loadImages();
-        updateGridLayout(document.getElementById('layoutSlider').value);
-    };
-</script>
+        window.onload = function () {
+            loadImages();
+        };
+    </script>
 </body>
-</html>
+
+</html>