public/lightbox-gallery
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

data-gallery-caption

Browse Source
This commit is contained in:
Valentin Silytuin
2025-06-30 14:07:16 +04:00
parent de89ab9363
commit 77d29caedb
2 changed files with 20 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
index.js
View File

@@ -177,7 +177,7 @@ const init = async (items = [], options = {}, index = 0) => {
vk: false, vk: false,
rt: false, rt: false,
}; };
items = items.map((item) => { items = items.map(({ url: item, caption }) => {
if (/youtube\.com\/watch\?v=/.test(item)) { if (/youtube\.com\/watch\?v=/.test(item)) {
isVideoInGallery.yt = true; isVideoInGallery.yt = true;
return ` return `
@@ -189,6 +189,7 @@ const init = async (items = [], options = {}, index = 0) => {
Загрузка YouTube-плеера... Загрузка YouTube-плеера...
</div> </div>
</div> </div>
${ caption ? `<div class="advdominion-lg__caption">${caption}</div>` : '' }
</div> </div>
`; `;
} else if (/(?:vkvideo\.ru|vk\.com)\/video/.test(item)) { } else if (/(?:vkvideo\.ru|vk\.com)\/video/.test(item)) {
@@ -202,6 +203,7 @@ const init = async (items = [], options = {}, index = 0) => {
Ошибка при загрузке VK-плеера Ошибка при загрузке VK-плеера
</div> </div>
</div> </div>
${ caption ? `<div class="advdominion-lg__caption">${caption}</div>` : '' }
</div> </div>
`; `;
} }
@@ -210,6 +212,7 @@ const init = async (items = [], options = {}, index = 0) => {
<div class="advdominion-lg__video-wrapper"> <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> <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> </div>
${ caption ? `<div class="advdominion-lg__caption">${caption}</div>` : '' }
</div> </div>
`; `;
} else if (/rutube\.ru/.test(item)) { } else if (/rutube\.ru/.test(item)) {
@@ -223,6 +226,7 @@ const init = async (items = [], options = {}, index = 0) => {
Ошибка при загрузке RuTube-плеера Ошибка при загрузке RuTube-плеера
</div> </div>
</div> </div>
${ caption ? `<div class="advdominion-lg__caption">${caption}</div>` : '' }
</div> </div>
`; `;
} }
@@ -231,12 +235,14 @@ const init = async (items = [], options = {}, index = 0) => {
<div class="advdominion-lg__video-wrapper"> <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> <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> </div>
${ caption ? `<div class="advdominion-lg__caption">${caption}</div>` : '' }
</div> </div>
`; `;
} }
return ` return `
<div class="advdominion-lg__item swiper-slide"> <div class="advdominion-lg__item swiper-slide">
<img class="advdominion-lg__image" src="${item}" alt="" loading="lazy"> <img class="advdominion-lg__image" src="${item}" alt="" loading="lazy">
${ caption ? `<div class="advdominion-lg__caption">${caption}</div>` : '' }
</div> </div>
`; `;
}); });
@@ -389,14 +395,20 @@ const init = async (items = [], options = {}, index = 0) => {
export const gallery = (container, options) => { export const gallery = (container, options) => {
const items = []; const items = [];
if (options.single) { if (options.single) {
items.push(container.href); items.push({
url: element.href,
caption: document.querySelector(element.dataset.galleryCaption)?.textContent,
});
container.addEventListener('click', (event) => { container.addEventListener('click', (event) => {
event.preventDefault(); event.preventDefault();
init(items, options); init(items, options);
}); });
} else { } else {
for (const [index, element] of [...container.children].entries()) { 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) => { element.addEventListener('click', (event) => {
event.preventDefault(); event.preventDefault();
init(items, options, index); init(items, options, index);

5
styles.css
View File

@@ -31,6 +31,8 @@
.advdominion-lg__item.swiper-slide { .advdominion-lg__item.swiper-slide {
align-items: center; align-items: center;
display: flex; display: flex;
flex-direction: column;
gap: 25px;
justify-content: center; justify-content: center;
} }
@@ -68,3 +70,6 @@ div.advdominion-lg__video {
.advdominion-lg__video_vk { .advdominion-lg__video_vk {
} }
.advdominion-lg__caption {
}