data-gallery-caption
This commit is contained in:
parent
de89ab9363
commit
77d29caedb
18
index.js
18
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);
|
||||
|
|
|
@ -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 {
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue