updated lightbox

out/index.html

@@ -26,6 +26,7 @@
             background-color: rgba(0, 0, 0, 0.8);
             align-items: center;
             justify-content: center;
+            z-index: 1000;
         }
         #lightbox img {
             max-width: 80%;
@@ -34,6 +35,11 @@
         #lightbox #caption {
             color: white;
             margin-top: 20px;
+            position: absolute;
+            bottom: 10px;
+            left: 50%;
+            transform: translateX(-50%);
+            text-align: center;
         }
     </style>
 </head>
@@ -42,7 +48,7 @@
         <h1>Image Gallery</h1>
     </header>
     <main>
-        <input type="range" id="layoutSlider" min="1" max="10" value="5">
+        <input type="range" id="layoutSlider" min="1" max="20" value="10" width="100%">
         <div id="gallery"></div>
     </main>
 
@@ -53,6 +59,9 @@
     </div>
 
     <script>
+        var currentImageIndex = -1;
+        var imageArray = [];
+
         function loadImages() {
             var gallery = document.getElementById('gallery');
 
@@ -60,13 +69,19 @@
                 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
+                img.onerror = function() { this.style.display = 'none'; };
+                img.onload = function() {
+                    this.classList.add('gallery-img');
+                    this.onclick = function() {
+                        openLightbox(this.src, this.src.split('/').pop());
+                        currentImageIndex = imageArray.indexOf(this);
+                    };
+                    // Add only visible images to the array
+                    imageArray.push(this);
+                };
                 gallery.appendChild(img);
             }
         }
-
-
         function updateGridLayout(columns) {
             var gallery = document.getElementById('gallery');
             gallery.style.gridTemplateColumns = `repeat(${columns}, 1fr)`;
@@ -86,6 +101,35 @@
             document.getElementById('lightbox').style.display = 'none';
         }
 
+        // Keyboard navigation for lightbox
+        document.onkeydown = function(e) {
+            if (document.getElementById('lightbox').style.display === 'flex') {
+                if (e.key === 'ArrowRight') {
+                    navigateLightbox(1); // Next image
+                } else if (e.key === 'ArrowLeft') {
+                    navigateLightbox(-1); // Previous image
+                }
+            }
+        };
+
+        function navigateLightbox(direction) {
+            var newIndex = currentImageIndex + direction;
+            // Looping over if the index goes out of bounds
+            if (newIndex >= imageArray.length) {
+                newIndex = 0;
+            } else if (newIndex < 0) {
+                newIndex = imageArray.length - 1;
+            }
+            // Checking if the new image is visible
+            if (imageArray[newIndex].style.display !== 'none') {
+                currentImageIndex = newIndex;
+                var newImage = imageArray[currentImageIndex];
+                openLightbox(newImage.src, newImage.src.split('/').pop());
+            } else {
+                // Recursively call the function to skip non-visible images
+                navigateLightbox(direction);
+            }
+        }
         window.onload = function() {
         loadImages();
         updateGridLayout(document.getElementById('layoutSlider').value);