fix?

iamdarkle · Sep 8, 2024 · 54f1f1c · 54f1f1c
1 parent d6450ec
commit 54f1f1c
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 13 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
@@ -3,11 +3,21 @@ import { extend } from 'flarum/common/extend';
 import CommentPost from 'flarum/forum/components/CommentPost';
 import { Fancybox } from '@fancyapps/ui';
 import { Carousel } from '@fancyapps/ui';
-import '@fancyapps/ui/dist/carousel/carousel.css';
-import '@fancyapps/ui/dist/fancybox/fancybox.css';
 
 app.initializers.add('darkle/fancybox', () => {
-  extend(CommentPost.prototype, 'oncreate', function () {
+  extend(CommentPost.prototype, 'oncreate', function (vnode) {
+    // Wrap images with anchor tags for Fancybox
+    this.element
+      .querySelectorAll('.Post-body img:not(.emoji):not(.Avatar):not(.PostMeta-ip img):not([data-reaction]):not([data-link-preview]):not(.flamoji img):not(.countryFlag):not(.no-fancybox)')
+      .forEach((node) => {
+        const src = node.getAttribute('data-src') || node.getAttribute('src');
+        const fancyboxEl = document.createElement('a');
+        fancyboxEl.setAttribute('data-fancybox', 'gallery');
+        fancyboxEl.href = src;
+        node.parentNode.insertBefore(fancyboxEl, node);
+        fancyboxEl.appendChild(node);
+      });
+
     // Initialize Carousel
     this.element
       .querySelectorAll('.f-carousel')
@@ -19,7 +29,23 @@ app.initializers.add('darkle/fancybox', () => {
 
     // Initialize Fancybox
     Fancybox.bind('[data-fancybox="gallery"]', {
-      // Custom Fancybox options
+      Carousel: {
+        infinite: false,
+      },
+      Slideshow: {
+        playOnStart: true,
+        timeout: 3000,
+      },
+      Toolbar: {
+        display: {
+          left: [],
+          middle: [],
+          right: ["slideshow", "close"],
+        },
+      },
+      Images: {
+        zoom: false,
+      },
     });
   });
 });
diff --git a/src/DefineGalleryTemplate.php b/src/DefineGalleryTemplate.php
@@ -9,8 +9,8 @@ class DefineGalleryTemplate
     public function __invoke(Configurator $config)
     {
         // Define the IMG-GALLERY tag template
-        $tag = $config->tags->add('IMG-GALLERY');
-        $tag->template = <<<XML
+        $galleryTag = $config->tags->add('IMG-GALLERY');
+        $galleryTag->template = <<<XML
         <div class="f-carousel" data-fancybox="gallery">
             <div class="f-carousel__viewport">
                 <div class="f-carousel__track">
@@ -19,13 +19,15 @@ public function __invoke(Configurator $config)
             </div>
         </div>
         XML;
-
+    
         // Define the IMG-GALLERY-ITEM tag template
-        $tag = $config->tags->add('IMG-GALLERY-ITEM');
-        $tag->template = <<<XML
+        $itemTag = $config->tags->add('IMG-GALLERY-ITEM');
+        $itemTag->template = <<<XML
             <div class="f-carousel__slide">
-                <xsl:apply-templates/>
+                <a href="{@src}" data-fancybox="gallery">
+                    <img src="{@src}" alt="{@alt}"/>
+                </a>
             </div>
         XML;
-    }
+    }    
 }