"മീഡിയവിക്കി:Common.js" എന്ന താളിന്റെ പതിപ്പുകൾ തമ്മിലുള്ള വ്യത്യാസം

← മുൻപത്തെ വ്യത്യാസം അടുത്ത വ്യത്യാസം →

@@ വരി 144: / വരി 144: @@
 /* ============================================================
-    Commons Gallery Lightbox Viewer (CORRECTED)
+    Commons Gallery Lightbox Viewer (with navigation)
     ============================================================ */
 (function () {
+    var galleryImages = [];
+    var currentIndex = -1;
+    function collectGalleryImages() {
+        galleryImages = Array.prototype.slice.call(
+            document.querySelectorAll('.commons-gallery-item img')
+        );
+    }
      function createLightbox() {
-         if (document.getElementById('commons-lightbox')) {
+         if (document.getElementById('commons-lightbox')) return;
-            return;
-        }
          var overlay = document.createElement('div');
@@ വരി 159: / വരി 166: @@
              '<div class="clb-backdrop"></div>' +
              '<div class="clb-content">' +
+                '<button class="clb-prev" aria-label="Previous">‹</button>' +
+                '<button class="clb-next" aria-label="Next">›</button>' +
                  '<button class="clb-close" aria-label="Close">×</button>' +
                  '<img class="clb-image" alt="">' +
@@ വരി 166: / വരി 175: @@
          document.body.appendChild(overlay);
-         overlay.querySelector('.clb-backdrop').addEventListener('click', closeLightbox);
+         overlay.querySelector('.clb-backdrop').onclick = closeLightbox;
-         overlay.querySelector('.clb-close').addEventListener('click', closeLightbox);
+        overlay.querySelector('.clb-close').onclick = closeLightbox;
+         overlay.querySelector('.clb-prev').onclick = showPrev;
+        overlay.querySelector('.clb-next').onclick = showNext;
          document.addEventListener('keydown', function (e) {
-             if (e.key === 'Escape') {
+            if (!overlay.classList.contains('active')) return;
-                closeLightbox();
-             }
+             if (e.key === 'Escape') closeLightbox();
+            if (e.key === 'ArrowLeft') showPrev();
+             if (e.key === 'ArrowRight') showNext();
          });
      }
      function openLightbox(img) {
+        collectGalleryImages();
+        currentIndex = galleryImages.indexOf(img);
+        if (currentIndex === -1) return;
          createLightbox();
+        showImage(currentIndex);
+        document.getElementById('commons-lightbox')
+            .classList.add('active');
+        document.body.style.overflow = 'hidden';
+    }
+    function showImage(index) {
          var overlay = document.getElementById('commons-lightbox');
          var lbImg = overlay.querySelector('.clb-image');
          var caption = overlay.querySelector('.clb-caption');
+        var img = galleryImages[index];
+        if (!img) return;
          lbImg.src = img.dataset.fullsrc || img.src;
          lbImg.alt = img.alt || '';
+        caption.innerHTML = img.dataset.caption || '';
-         caption.innerHTML = img.dataset.caption || '';
+         currentIndex = index;
+    }
+    function showPrev() {
+        if (currentIndex > 0) {
+            showImage(currentIndex - 1);
+        }
+    }
-         overlay.classList.add('active');
+    function showNext() {
-         document.body.style.overflow = 'hidden';
+         if (currentIndex < galleryImages.length - 1) {
+            showImage(currentIndex + 1);
+         }
      }
@@ വരി 199: / വരി 236: @@
          document.body.style.overflow = '';
      }
+    /* Event delegation for async gallery */
+    document.addEventListener('click', function (e) {
+        var img = e.target;
+        if (img && img.matches('.commons-gallery-item img')) {
+            openLightbox(img);
+        }
+    });
+})();
      /* ========================================================