try

iamdarkle · Sep 8, 2024 · 2f00ec9 · 2f00ec9
1 parent bfa39fe
commit 2f00ec9
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 18 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
@@ -29,14 +29,14 @@ app.initializers.add('darkle/fancybox', () => {
         const carousel = new Carousel(gallery, {
           Dots: false,
           infinite: false,
-          dragFree: true,
+          dragFree: false,
         });
         carousels.set(gallery.id, carousel);
       }
     });
 
-    // Initialize Fancybox
-    Fancybox.bind(postBody, '[data-fancybox]', {
+    // Setup Fancybox for all images
+    const fancyboxOptions = {
       Carousel: {
         infinite: false,
       },
@@ -72,9 +72,9 @@ app.initializers.add('darkle/fancybox', () => {
         },
       },
       dragToClose: false,
-    });
+    };
 
-    // Prevent default link behavior and handle dragging
+    // Handle clicks on Fancybox-enabled links
     postBody.querySelectorAll('a[data-fancybox]').forEach(link => {
       let isDragging = false;
       let startX, startY;
@@ -92,9 +92,16 @@ app.initializers.add('darkle/fancybox', () => {
       });
 
       link.addEventListener('click', (e) => {
-        if (isDragging) {
-          e.preventDefault();
-          e.stopPropagation();
+        e.preventDefault();
+        if (!isDragging) {
+          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), {
+            ...fancyboxOptions,
+            startIndex: index,
+          });
         }
       });
     });

diff --git a/src/DefineGalleryTemplate.php b/src/DefineGalleryTemplate.php
@@ -21,24 +21,22 @@ public function __invoke(Configurator $config)
                 <xsl:choose>
                     <xsl:when test="parent::FANCYBOX-GALLERY-ITEM">
                         <a data-fancybox="gallery" href="{@url}">
-                            <xsl:copy>
-                                <xsl:apply-templates select="@*"/>
+                            <img>
+                                <xsl:copy-of select="@*"/>
                                 <xsl:attribute name="data-src">
                                     <xsl:value-of select="@url"/>
                                 </xsl:attribute>
-                                <xsl:apply-templates/>
-                            </xsl:copy>
+                            </img>
                         </a>
                     </xsl:when>
                     <xsl:otherwise>
                         <a data-fancybox="single" href="{@url}">
-                            <xsl:copy>
-                                <xsl:apply-templates select="@*"/>
+                            <img>
+                                <xsl:copy-of select="@*"/>
                                 <xsl:attribute name="data-src">
                                     <xsl:value-of select="@url"/>
                                 </xsl:attribute>
-                                <xsl:apply-templates/>
-                            </xsl:copy>
+                            </img>
                         </a>
                     </xsl:otherwise>
                 </xsl:choose>