try

iamdarkle · Sep 9, 2024 · 5c1ef94 · 5c1ef94
1 parent 0d745db
commit 5c1ef94
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 7 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
@@ -35,7 +35,6 @@ app.initializers.add('darkle/fancybox', () => {
       }
     });
 
-    // Setup Fancybox for all images
     const fancyboxOptions = {
       Carousel: {
         infinite: false,
@@ -74,7 +73,6 @@ app.initializers.add('darkle/fancybox', () => {
       dragToClose: false,
     };
 
-    // Handle clicks on Fancybox-enabled links
     postBody.querySelectorAll('a[data-fancybox]').forEach(link => {
       let isDragging = false;
       let startX, startY;
@@ -97,13 +95,25 @@ app.initializers.add('darkle/fancybox', () => {
           const groupName = link.getAttribute('data-fancybox');
           const group = postBody.querySelectorAll(`a[data-fancybox="${groupName}"]`);
           const index = Array.from(group).indexOf(link);
-          
-          Fancybox.fromNodes(Array.from(group), {
+
+          const fancyboxInstance = Fancybox.fromNodes(Array.from(group), {
             ...fancyboxOptions,
             startIndex: index,
           });
+
+          // Sync slide changes between Carousel and Fancybox
+          fancyboxInstance.Carousel.on('change', (carousel, slide) => {
+            const currentSlideIndex = slide.index;
+            const carouselEl = slide.triggerEl.closest('.fancybox-gallery');
+            if (carouselEl) {
+              const carousel = carousels.get(carouselEl.id);
+              if (carousel) {
+                carousel.slideTo(currentSlideIndex, { friction: 0 });
+              }
+            }
+          });
         }
       });
     });
   };
-});
+});