added gakllery effect

Author: rrMat

assets/css/main.css

@@ -2385,3 +2385,63 @@ body.modal-open {
     font-size: 1em;
   }
 }
+
+/* Navigation arrows */
+.modal-nav {
+    cursor: pointer;
+    position: absolute;
+    top: 50%;
+    width: auto;
+    margin-top: -22px;
+    padding: 16px;
+    color: white;
+    font-weight: bold;
+    font-size: 24px;
+    transition: 0.3s ease;
+    border-radius: 0 3px 3px 0;
+    user-select: none;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 10003;
+}
+
+.modal-prev {
+    left: 20px;
+    border-radius: 3px 0 0 3px;
+}
+
+.modal-next {
+    right: 20px;
+    border-radius: 0 3px 3px 0;
+}
+
+.modal-nav:hover {
+    background-color: rgba(0, 0, 0, 0.8);
+    color: #f56a6a;
+}
+
+.modal-nav.disabled {
+    color: #666;
+    cursor: not-allowed;
+    background-color: rgba(0, 0, 0, 0.2);
+}
+
+.modal-nav.disabled:hover {
+    background-color: rgba(0, 0, 0, 0.2);
+    color: #666;
+}
+
+@media screen and (max-width: 736px) {
+    .modal-nav {
+        font-size: 18px;
+        padding: 12px;
+        margin-top: -18px;
+    }
+    
+    .modal-prev {
+        left: 10px;
+    }
+    
+    .modal-next {
+        right: 10px;
+    }
+}

assets/js/image-modal.js

@@ -7,6 +7,10 @@
         var captionText = $('#caption');
         var closeBtn = $('.close');
 
+        // Gallery state
+        var currentImageIndex = 0;
+        var imageElements = [];
+        
         // Transform state
         var scale = 1;
         var translateX = 0;
@@ -30,14 +34,76 @@
             updateTransform();
         }
 
+        function showImage(index) {
+            if (index < 0 || index >= imageElements.length) return;
+            
+            currentImageIndex = index;
+            var img = imageElements[index];
+            var fullSrc = $(img).data('full') || img.src;
+            
+            modalImg.attr('src', fullSrc);
+            captionText.text($(img).attr('alt') + ` (${index + 1} of ${imageElements.length})`);
+            resetTransform();
+            
+            // Update navigation button states
+            updateNavigationButtons();
+        }
+
+        function updateNavigationButtons() {
+            $('.modal-prev').toggleClass('disabled', currentImageIndex === 0);
+            $('.modal-next').toggleClass('disabled', currentImageIndex === imageElements.length - 1);
+        }
+
+        function goToPrevious() {
+            if (currentImageIndex > 0) {
+                showImage(currentImageIndex - 1);
+            }
+        }
+
+        function goToNext() {
+            if (currentImageIndex < imageElements.length - 1) {
+                showImage(currentImageIndex + 1);
+            }
+        }
+
+        // Initialize gallery - collect all images on page load
+        function initializeGallery() {
+            imageElements = $('.image.fit img, .image.main img').get();
+        }
+
         // Add click event to all images
-        $('.image.fit img, .image.main img').on('click', function() {
+        $(document).on('click', '.image.fit img, .image.main img', function() {
+            initializeGallery();
+            currentImageIndex = imageElements.indexOf(this);
             modal.show();
-            modalImg.attr('src', this.src);
-            captionText.text($(this).attr('alt'));
-            resetTransform();
+            showImage(currentImageIndex);
+            $('body').addClass('modal-open');
+        });
+
+        // Keyboard navigation
+        $(document).on('keydown', function(e) {
+            if (!modal.is(':visible')) return;
+            
+            switch(e.key) {
+                case 'Escape':
+                    modal.hide();
+                    $('body').removeClass('modal-open');
+                    break;
+                case 'ArrowLeft':
+                    e.preventDefault();
+                    goToPrevious();
+                    break;
+                case 'ArrowRight':
+                    e.preventDefault();
+                    goToNext();
+                    break;
+            }
         });
 
+        // Navigation button events
+        $(document).on('click', '.modal-prev:not(.disabled)', goToPrevious);
+        $(document).on('click', '.modal-next:not(.disabled)', goToNext);
+
         // Mouse wheel zoom
         modalImg.on('wheel', function(e) {
             e.preventDefault();
@@ -132,17 +198,13 @@
         // Close modal events
         closeBtn.on('click', function() {
             modal.hide();
+            $('body').removeClass('modal-open');
         });
 
         modal.on('click', function(event) {
             if (event.target === this) {
                 modal.hide();
-            }
-        });
-
-        $(document).on('keydown', function(e) {
-            if (e.key === 'Escape') {
-                modal.hide();
+                $('body').removeClass('modal-open');
             }
         });
     });

experiments/umbrella-girl.html

@@ -266,6 +266,8 @@ <h2>Menu</h2>
 		<!-- Image Modal -->
 		<div id="imageModal" class="modal">
 			<span class="close">&times;</span>
+			<div class="modal-nav modal-prev">&#10094;</div>
+			<div class="modal-nav modal-next">&#10095;</div>
 			<img class="modal-content" id="modalImage">
 			<div id="caption"></div>
 		</div>