Prevent navigation while zoomed in lightbox

js/lightbox.js

@@ -12,6 +12,8 @@
     var lb = null;
     var img = null;
     var cap = null;
+    var prevZone = null;
+    var nextZone = null;
     var items = [];
     var index = 0;
 
@@ -53,6 +55,8 @@
       document.body.appendChild(lb);
       img = lb.querySelector('img.luxtools-lightbox-img');
       cap = lb.querySelector('.luxtools-lightbox-caption');
+      prevZone = lb.querySelector('.luxtools-lightbox-zone-prev');
+      nextZone = lb.querySelector('.luxtools-lightbox-zone-next');
 
       lb.addEventListener('click', onClick);
     }
@@ -70,6 +74,18 @@
         img.style.transform = 'scale(' + scale + ') translate(' + panX + 'px, ' + panY + 'px)';
       }
       img.style.cursor = scale > 1 ? 'grab' : '';
+      updateNavigationState();
+    }
+
+    function updateNavigationState() {
+      var navigationEnabled = canNavigate();
+
+      if (lb && lb.classList) {
+        lb.classList.toggle('luxtools-lightbox-no-nav', !navigationEnabled);
+      }
+
+      if (prevZone) prevZone.disabled = !navigationEnabled;
+      if (nextZone) nextZone.disabled = !navigationEnabled;
     }
 
     function resetZoom() {
@@ -97,6 +113,10 @@
       render();
     }
 
+    function canNavigate() {
+      return scale <= 1;
+    }
+
     // Event handlers
     function onWheel(e) {
       e.preventDefault();
@@ -148,10 +168,10 @@
       if (key === 'Escape') {
         e.preventDefault();
         close();
-      } else if (key === 'ArrowRight') {
+      } else if (key === 'ArrowRight' && canNavigate()) {
         e.preventDefault();
         next();
-      } else if (key === 'ArrowLeft') {
+      } else if (key === 'ArrowLeft' && canNavigate()) {
         e.preventDefault();
         prev();
       }
@@ -168,8 +188,16 @@
       if (!t || !t.getAttribute) return;
       var action = t.getAttribute('data-luxtools-action') || '';
       if (action === 'close') { e.preventDefault(); close(); return; }
-      if (action === 'next') { e.preventDefault(); next(); return; }
+      if (action === 'next') {
-      if (action === 'prev') { e.preventDefault(); prev(); return; }
+        e.preventDefault();
+        if (canNavigate()) next();
+        return;
+      }
+      if (action === 'prev') {
+        e.preventDefault();
+        if (canNavigate()) prev();
+        return;
+      }
 
       if (t.closest && t.closest('button.luxtools-lightbox-zone')) return;
       if (t.closest && t.closest('img.luxtools-lightbox-img')) return;

style.css

@@ -360,6 +360,10 @@ html.luxtools-noscroll body {
     cursor: pointer;
 }
 
+.luxtools-lightbox.luxtools-lightbox-no-nav button.luxtools-lightbox-zone {
+    pointer-events: none;
+}
+
 .luxtools-lightbox button.luxtools-lightbox-zone-prev {
     left: 0;
 }