From 77d29caedbdd0016d5301cd7b33d65ca1285817d Mon Sep 17 00:00:00 2001
From: Valentin Silytuin <valentinsilyutin@icloud.com>
Date: Mon, 30 Jun 2025 14:07:16 +0400
Subject: [PATCH] data-gallery-caption

---
 index.js   | 18 +++++++++++++++---
 styles.css |  5 +++++
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/index.js b/index.js
index fc1412e..bf22a51 100644
--- a/index.js
+++ b/index.js
@@ -177,7 +177,7 @@ const init = async (items = [], options = {}, index = 0) => {
         vk: false,
         rt: false,
     };
-    items = items.map((item) => {
+    items = items.map(({ url: item, caption }) => {
         if (/youtube\.com\/watch\?v=/.test(item)) {
             isVideoInGallery.yt = true;
             return `
@@ -189,6 +189,7 @@ const init = async (items = [], options = {}, index = 0) => {
                             Загрузка YouTube-плеера...
                         </div>
                     </div>
+                    ${ caption ? `<div class="advdominion-lg__caption">${caption}</div>` : '' }
                 </div>
             `;
         } else if (/(?:vkvideo\.ru|vk\.com)\/video/.test(item)) {
@@ -202,6 +203,7 @@ const init = async (items = [], options = {}, index = 0) => {
                                 Ошибка при загрузке VK-плеера
                             </div>
                         </div>
+                        ${ caption ? `<div class="advdominion-lg__caption">${caption}</div>` : '' }
                     </div>
                 `;
             }
@@ -210,6 +212,7 @@ const init = async (items = [], options = {}, index = 0) => {
                     <div class="advdominion-lg__video-wrapper">
                         <iframe class="advdominion-lg__video advdominion-lg__video_vk" src="https://vkvideo.ru/video_ext.php?oid=${videoId[1]}&id=${videoId[2]}&hd=4&js_api=1" allow="autoplay; encrypted-media; fullscreen; picture-in-picture; screen-wake-lock;"></iframe>
                     </div>
+                    ${ caption ? `<div class="advdominion-lg__caption">${caption}</div>` : '' }
                 </div>
             `;
         } else if (/rutube\.ru/.test(item)) {
@@ -223,6 +226,7 @@ const init = async (items = [], options = {}, index = 0) => {
                                 Ошибка при загрузке RuTube-плеера
                             </div>
                         </div>
+                        ${ caption ? `<div class="advdominion-lg__caption">${caption}</div>` : '' }
                     </div>
                 `;
             }
@@ -231,12 +235,14 @@ const init = async (items = [], options = {}, index = 0) => {
                     <div class="advdominion-lg__video-wrapper">
                         <iframe class="advdominion-lg__video advdominion-lg__video_rt" src="https://rutube.ru/play/embed/${videoId[1]}" allow="autoplay; encrypted-media; fullscreen; picture-in-picture; screen-wake-lock;"></iframe>
                     </div>
+                    ${ caption ? `<div class="advdominion-lg__caption">${caption}</div>` : '' }
                 </div>
             `;
         }
         return `
             <div class="advdominion-lg__item swiper-slide">
                 <img class="advdominion-lg__image" src="${item}" alt="" loading="lazy">
+                ${ caption ? `<div class="advdominion-lg__caption">${caption}</div>` : '' }
             </div>
         `;
     });
@@ -389,14 +395,20 @@ const init = async (items = [], options = {}, index = 0) => {
 export const gallery = (container, options) => {
     const items = [];
     if (options.single) {
-        items.push(container.href);
+        items.push({
+            url: element.href,
+            caption: document.querySelector(element.dataset.galleryCaption)?.textContent,
+        });
         container.addEventListener('click', (event) => {
             event.preventDefault();
             init(items, options);
         });
     } else {
         for (const [index, element] of [...container.children].entries()) {
-            items.push(element.href);
+            items.push({
+                url: element.href,
+                caption: document.querySelector(element.dataset.galleryCaption)?.textContent,
+            });
             element.addEventListener('click', (event) => {
                 event.preventDefault();
                 init(items, options, index);
diff --git a/styles.css b/styles.css
index ad50a3d..197bac7 100644
--- a/styles.css
+++ b/styles.css
@@ -31,6 +31,8 @@
 .advdominion-lg__item.swiper-slide {
     align-items: center;
     display: flex;
+    flex-direction: column;
+    gap: 25px;
     justify-content: center;
 }
 
@@ -68,3 +70,6 @@ div.advdominion-lg__video {
 
 .advdominion-lg__video_vk {
 }
+
+.advdominion-lg__caption {
+}