try

iamdarkle · Sep 8, 2024 · ebd2b11 · ebd2b11
1 parent de68d6a
commit ebd2b11
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 36 deletions.
diff --git a/js/dist/forum.js b/js/dist/forum.js
diff --git a/js/dist/forum.js.map b/js/dist/forum.js.map
diff --git a/js/src/forum/index.js b/js/src/forum/index.js
@@ -33,40 +33,38 @@ app.initializers.add('darkle/fancybox', () => {
       }
     });
 
-    // Initialize Fancybox for both galleries and single images
-    Fancybox.bind(postBody, '[data-fancybox]', {
-      Carousel: {
-        infinite: false,
-      },
-      Toolbar: {
-        display: {
-          left: [],
-          middle: [],
-          right: ["slideshow", "fullscreen", "close"],
-        },
-      },
-      Images: {
-        initialSize: 'fit',
-      },
-      on: {
-        initCarousel: (fancybox) => {
-          const slide = fancybox.getSlide();
-          const carouselEl = slide.triggerEl && slide.triggerEl.closest('.fancybox-gallery');
-          if (carouselEl) {
-            const carousel = Carousel.getInstance(carouselEl);
-            if (carousel) {
-              carousel.slideTo(slide.index);
-            }
-          }
-        },
-      },
-    });
-
-    // Prevent default link behavior
-    postBody.querySelectorAll('a[data-fancybox]').forEach(link => {
-      link.onclick = (e) => {
-        e.preventDefault();
-      };
+    // Prepare Fancybox items
+    const fancyboxItems = [];
+    postBody.querySelectorAll('a[data-fancybox]').forEach((link, index) => {
+      const img = link.querySelector('img');
+      if (img) {
+        fancyboxItems.push({
+          src: link.href,
+          type: 'image',
+          thumbSrc: img.src,
+        });
+
+        // Update link to use JavaScript API
+        link.onclick = (e) => {
+          e.preventDefault();
+          Fancybox.show(fancyboxItems, {
+            startIndex: index,
+            Carousel: {
+              infinite: false,
+            },
+            Toolbar: {
+              display: {
+                left: [],
+                middle: [],
+                right: ["slideshow", "fullscreen", "close"],
+              },
+            },
+            Images: {
+              initialSize: 'fit',
+            },
+          });
+        };
+      }
     });
   };
 });