try

iamdarkle · Sep 9, 2024 · 9b17861 · 9b17861
1 parent 41e1260
commit 9b17861
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 17 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
@@ -28,8 +28,8 @@ app.initializers.add('darkle/fancybox', () => {
         }
       });
 
-      // Initialize Fancybox
-      Fancybox.bind(postBody, '[data-fancybox]', {
+      // Fancybox options
+      const fancyboxOptions = {
         Carousel: {
           infinite: false,
         },
@@ -65,9 +65,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;
@@ -85,9 +85,22 @@ 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.show(
+              Array.from(group).map(el => ({
+                src: el.href,
+                type: 'image',
+              })),
+              {
+                ...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>