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,
|
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);
|
||||||
|
|
|
@ -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 {
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue