diff --git a/js/src/forum/index.js b/js/src/forum/index.js
index e40c9e5..da61c30 100644
--- a/js/src/forum/index.js
+++ b/js/src/forum/index.js
@@ -9,112 +9,101 @@ import { Fancybox } from '@fancyapps/ui/dist/fancybox/fancybox.esm.js';
 import '@fancyapps/ui/dist/fancybox/fancybox.css';
 
 app.initializers.add('darkle/fancybox', () => {
-  extend(CommentPost.prototype, 'oninit', function() {
-    this.initFancybox = () => {
-      const postBody = this.element.querySelector('.Post-body');
-      if (!postBody) return;
+  extend(CommentPost.prototype, 'oncreate', function () {
+    this.initFancybox();
+  });
 
-      // Initialize Carousel for each gallery
-      const carousels = new Map();
-      postBody.querySelectorAll('.fancybox-gallery').forEach((gallery, index) => {
-        if (!gallery.id) {
-          gallery.id = `gallery-${index}`;
-          const carousel = new Carousel(gallery, {
-            Dots: false,
-            infinite: false,
-            dragFree: false,
-          });
-          carousels.set(gallery.id, carousel);
-        }
-      });
+  extend(CommentPost.prototype, 'onupdate', function () {
+    this.initFancybox();
+  });
 
-      // Setup Fancybox for all images
-      const fancyboxOptions = {
-        Carousel: {
+  CommentPost.prototype.initFancybox = function () {
+    const postBody = this.element.querySelector('.Post-body');
+    if (!postBody) return;
+
+    // Initialize Carousel for each gallery
+    const carousels = new Map();
+    postBody.querySelectorAll('.fancybox-gallery').forEach((gallery, index) => {
+      if (!gallery.id) {
+        gallery.id = `gallery-${index}`;
+        const carousel = new Carousel(gallery, {
+          Dots: false,
           infinite: false,
+          dragFree: false,
+        });
+        carousels.set(gallery.id, carousel);
+      }
+    });
+
+    // Setup Fancybox for all images
+    const fancyboxOptions = {
+      Carousel: {
+        infinite: false,
+      },
+      Toolbar: {
+        display: {
+          left: [],
+          middle: [],
+          right: ["slideshow", "fullscreen", "close"],
         },
-        Toolbar: {
-          display: {
-            left: [],
-            middle: [],
-            right: ["slideshow", "fullscreen", "close"],
-          },
-        },
-        Images: {
-          initialSize: 'fit',
-        },
-        on: {
-          done: (fancybox, slide) => {
-            const carouselEl = slide.triggerEl.closest('.fancybox-gallery');
-            if (carouselEl) {
-              const carousel = carousels.get(carouselEl.id);
-              if (carousel) {
-                carousel.slideTo(slide.index, { friction: 0 });
-              }
+      },
+      Images: {
+        initialSize: 'fit',
+      },
+      on: {
+        done: (fancybox, slide) => {
+          const carouselEl = slide.triggerEl.closest('.fancybox-gallery');
+          if (carouselEl) {
+            const carousel = carousels.get(carouselEl.id);
+            if (carousel) {
+              carousel.slideTo(slide.index, { friction: 0 });
             }
-          },
-          "Carousel.change": (fancybox, carousel, slideIndex) => {
-            const slide = fancybox.getSlide();
-            const carouselEl = slide.triggerEl.closest('.fancybox-gallery');
-            if (carouselEl) {
-              const carousel = carousels.get(carouselEl.id);
-              if (carousel) {
-                carousel.slideTo(slideIndex, { friction: 0 });
-              }
+          }
+        },
+        "Carousel.change": (fancybox, carousel, slideIndex) => {
+          const slide = fancybox.getSlide();
+          const carouselEl = slide.triggerEl.closest('.fancybox-gallery');
+          if (carouselEl) {
+            const carousel = carousels.get(carouselEl.id);
+            if (carousel) {
+              carousel.slideTo(slideIndex, { friction: 0 });
             }
-          },
-          destroy: (fancybox) => {
-            // Store the current scroll position
-            const scrollPosition = window.pageYOffset;
-            
-            // Restore the scroll position after a short delay
-            setTimeout(() => {
-              window.scrollTo(0, scrollPosition);
-            }, 0);
-          },
+          }
         },
-        dragToClose: false,
-      };
-
-      // Handle clicks on Fancybox-enabled links
-      postBody.querySelectorAll('a[data-fancybox]').forEach(link => {
-        let isDragging = false;
-        let startX, startY;
-
-        link.addEventListener('mousedown', (e) => {
-          isDragging = false;
-          startX = e.clientX;
-          startY = e.clientY;
-        });
+      },
+      dragToClose: false,
+    };
 
-        link.addEventListener('mousemove', (e) => {
-          if (Math.abs(e.clientX - startX) > 5 || Math.abs(e.clientY - startY) > 5) {
-            isDragging = true;
-          }
-        });
+    // Handle clicks on Fancybox-enabled links
+    postBody.querySelectorAll('a[data-fancybox]').forEach(link => {
+      let isDragging = false;
+      let startX, startY;
 
-        link.addEventListener('click', (e) => {
-          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,
-            });
-          }
-        });
+      link.addEventListener('mousedown', (e) => {
+        isDragging = false;
+        startX = e.clientX;
+        startY = e.clientY;
       });
-    };
-  });
 
-  extend(CommentPost.prototype, 'oncreate', function() {
-    this.initFancybox();
-  });
+      link.addEventListener('mousemove', (e) => {
+        if (Math.abs(e.clientX - startX) > 5 || Math.abs(e.clientY - startY) > 5) {
+          isDragging = true;
+        }
+      });
 
-  extend(CommentPost.prototype, 'onupdate', function() {
-    this.initFancybox();
-  });
-});
+      link.addEventListener('click', (e) => {
+        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,
+          });
+        }
+      });
+    });
+  };
+});
\ No newline at end of file
diff --git a/src/DefineGalleryTemplate.php b/src/DefineGalleryTemplate.php
index 1d69c1a..af94ec2 100644
--- a/src/DefineGalleryTemplate.php
+++ b/src/DefineGalleryTemplate.php
@@ -20,22 +20,16 @@ public function __invoke(Configurator $config)
             $tag->template = <<<XML
                 <xsl:choose>
                     <xsl:when test="parent::FANCYBOX-GALLERY-ITEM">
-                        <a data-fancybox="gallery" href="{@url}">
-                            <img>
+                        <a data-fancybox="gallery" href="{@src}">
+                            <img src="{@src}" alt="{@alt}" loading="lazy">
                                 <xsl:copy-of select="@*"/>
-                                <xsl:attribute name="data-src">
-                                    <xsl:value-of select="@url"/>
-                                </xsl:attribute>
                             </img>
                         </a>
                     </xsl:when>
                     <xsl:otherwise>
-                        <a data-fancybox="single" href="{@url}">
-                            <img>
+                        <a data-fancybox="single" href="{@src}">
+                            <img src="{@src}" alt="{@alt}" loading="lazy">
                                 <xsl:copy-of select="@*"/>
-                                <xsl:attribute name="data-src">
-                                    <xsl:value-of select="@url"/>
-                                </xsl:attribute>
                             </img>
                         </a>
                     </xsl:otherwise>