Add lightbox for image gallery

Output.php

@@ -83,7 +83,7 @@ class Output
 
         /** @var \Doku_Renderer_xhtml $renderer */
         $renderer = $this->renderer;
-        $renderer->doc .= '<div class="luxtools-plugin luxtools-gallery">';
+        $renderer->doc .= '<div class="luxtools-plugin luxtools-gallery" data-luxtools-gallery="1">';
 
         foreach ($this->files as $item) {
             $url = $this->itemWebUrl($item, !empty($params['randlinks']));
@@ -98,6 +98,10 @@ class Output
             $safeThumbUrl = hsc($thumbUrl);
             $safePlaceholderUrl = hsc($placeholderUrl);
             $label = hsc($item['name']);
+            $caption = hsc(basename((string)($item['name'] ?? '')));
+            if ($caption === '') {
+                $caption = $label;
+            }
 
             $initialSrc = $safePlaceholderUrl;
                 $dataThumb = ' data-thumb-src="' . $safeThumbUrl . '"';
@@ -108,7 +112,14 @@ class Output
                 $dataThumb = '';
             }
 
-            $renderer->doc .= '<a href="' . $safeUrl . '" class="media" title="' . $label . '" aria-label="' . $label . '">';
+            $renderer->doc .= '<a'
+                . ' href="' . $safeUrl . '"'
+                . ' class="media luxtools-gallery-item"'
+                . ' title="' . $label . '"'
+                . ' aria-label="' . $label . '"'
+                . ' data-luxtools-full="' . $safeUrl . '"'
+                . ' data-luxtools-name="' . $caption . '"'
+                . '>';
             $renderer->doc .= '<img'
                 . ' class="luxtools-thumb"'
                 . ' src="' . $initialSrc . '"'
@@ -119,6 +130,7 @@ class Output
                 . ' loading="lazy"'
                 . ' decoding="async"'
                 . ' />';
+            $renderer->doc .= '<span class="luxtools-gallery-caption">' . $caption . '</span>';
             $renderer->doc .= '</a>';
         }