126 lines
4.0 KiB
JavaScript
126 lines
4.0 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
// Небольшая задержка для корректной инициализации GLightbox
|
|
setTimeout(() => {
|
|
document.querySelectorAll('.simple-gallery-block').forEach(function (block) {
|
|
const blockId = block.getAttribute('data-gallery-id');
|
|
initSimpleGallery(blockId);
|
|
});
|
|
}, 100);
|
|
});
|
|
|
|
function initSimpleGallery(blockId) {
|
|
const container = document.getElementById(blockId);
|
|
if (!container) return;
|
|
|
|
let mainSwiper;
|
|
let thumbnailSwiper;
|
|
let lightbox;
|
|
|
|
// Проверяем, одно изображение или несколько
|
|
const isSingleImage = container.querySelector('.single-image');
|
|
const hasMultipleImages = container.querySelector('.gallery-swiper');
|
|
|
|
function initLightbox() {
|
|
if (typeof GLightbox === 'undefined') {
|
|
console.warn('GLightbox is not loaded');
|
|
return;
|
|
}
|
|
|
|
const selector = `#${blockId} .glightbox`;
|
|
|
|
if (lightbox) {
|
|
lightbox.destroy();
|
|
}
|
|
|
|
lightbox = GLightbox({
|
|
selector: selector,
|
|
preload: false,
|
|
touchNavigation: true,
|
|
loop: true
|
|
});
|
|
}
|
|
|
|
function updateThumbnails(activeIndex) {
|
|
const thumbnails = container.querySelectorAll('.thumbnail');
|
|
thumbnails.forEach((thumb, index) => {
|
|
if (index === activeIndex) {
|
|
thumb.classList.remove('opacity-50', 'hover:opacity-80');
|
|
thumb.classList.add('opacity-100', 'active');
|
|
} else {
|
|
thumb.classList.remove('opacity-100', 'active');
|
|
thumb.classList.add('opacity-50', 'hover:opacity-80');
|
|
}
|
|
});
|
|
}
|
|
|
|
function centerThumbnail(activeIndex) {
|
|
if (thumbnailSwiper) {
|
|
thumbnailSwiper.slideTo(activeIndex);
|
|
}
|
|
}
|
|
|
|
// Инициализация для одного изображения
|
|
if (isSingleImage) {
|
|
initLightbox();
|
|
|
|
window.addEventListener('beforeunload', () => {
|
|
if (lightbox) lightbox.destroy();
|
|
});
|
|
return;
|
|
}
|
|
|
|
// Инициализация для множественных изображений
|
|
if (hasMultipleImages) {
|
|
// Thumbnail swiper
|
|
thumbnailSwiper = new Swiper(`#${blockId} .thumbnail-swiper`, {
|
|
slidesPerView: 'auto',
|
|
spaceBetween: 6,
|
|
freeMode: true,
|
|
grabCursor: true,
|
|
watchSlidesProgress: true,
|
|
});
|
|
|
|
// Main swiper
|
|
mainSwiper = new Swiper(`#${blockId} .gallery-swiper`, {
|
|
slidesPerView: 'auto',
|
|
spaceBetween: 0,
|
|
grabCursor: true,
|
|
watchSlidesProgress: true,
|
|
lazy: {
|
|
loadPrevNext: true,
|
|
loadOnTransitionStart: true,
|
|
},
|
|
on: {
|
|
slideChange: function () {
|
|
updateThumbnails(this.realIndex);
|
|
centerThumbnail(this.realIndex);
|
|
}
|
|
}
|
|
});
|
|
|
|
// Lightbox для множественных изображений
|
|
initLightbox();
|
|
|
|
// Обработчик клика по thumbnail
|
|
container.addEventListener('click', (e) => {
|
|
const thumbnail = e.target.closest('.thumbnail');
|
|
if (!thumbnail) return;
|
|
|
|
const index = parseInt(thumbnail.getAttribute('data-index'));
|
|
|
|
if (mainSwiper) {
|
|
mainSwiper.slideTo(index);
|
|
}
|
|
|
|
updateThumbnails(index);
|
|
centerThumbnail(index);
|
|
});
|
|
|
|
// Cleanup
|
|
window.addEventListener('beforeunload', () => {
|
|
if (mainSwiper) mainSwiper.destroy();
|
|
if (thumbnailSwiper) thumbnailSwiper.destroy();
|
|
if (lightbox) lightbox.destroy();
|
|
});
|
|
}
|
|
} |