You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
110 lines
3.7 KiB
110 lines
3.7 KiB
document.addEventListener('DOMContentLoaded', function() {
|
|
document.querySelectorAll('.gallery-block').forEach(function(block) {
|
|
const blockId = block.getAttribute('data-gallery-id');
|
|
initGalleryBlock(blockId);
|
|
});
|
|
});
|
|
|
|
function initGalleryBlock(blockId) {
|
|
const container = document.getElementById(blockId);
|
|
if (!container) return;
|
|
|
|
const swipers = {};
|
|
let lightbox;
|
|
|
|
function initSwiper(tabId) {
|
|
if (swipers[tabId]) {
|
|
swipers[tabId].destroy(true, true);
|
|
}
|
|
|
|
swipers[tabId] = new Swiper(`#${blockId} #swiper-${tabId}`, {
|
|
slidesPerView: 1.5,
|
|
spaceBetween: 20,
|
|
loop: true,
|
|
centeredSlides: true,
|
|
navigation: {
|
|
nextEl: `#${blockId} #swiper-${tabId} .swiper-button-next`,
|
|
prevEl: `#${blockId} #swiper-${tabId} .swiper-button-prev`,
|
|
},
|
|
on: {
|
|
slideChange: function() {
|
|
updateThumbnails(tabId, this.realIndex);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function initLightbox(tabId) {
|
|
if (lightbox) {
|
|
lightbox.destroy();
|
|
}
|
|
|
|
lightbox = GLightbox({
|
|
selector: `#${blockId} #tab-${tabId} .glightbox`
|
|
});
|
|
}
|
|
|
|
function updateThumbnails(tabId, activeIndex) {
|
|
const thumbnails = container.querySelectorAll(`#tab-${tabId} .thumbnail`);
|
|
thumbnails.forEach((thumb, index) => {
|
|
if (index === activeIndex) {
|
|
thumb.classList.add('active', '!border-blue-500');
|
|
thumb.classList.remove('border-transparent');
|
|
} else {
|
|
thumb.classList.remove('active', '!border-blue-500');
|
|
thumb.classList.add('border-transparent');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Табы
|
|
container.querySelectorAll('.tab-button').forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
const tabId = button.getAttribute('data-tab');
|
|
|
|
container.querySelectorAll('.tab-button').forEach(btn => {
|
|
btn.classList.remove('active', 'underline');
|
|
btn.classList.add('bg-gray-100');
|
|
});
|
|
button.classList.add('active', 'underline');
|
|
button.classList.remove('bg-gray-100');
|
|
|
|
container.querySelectorAll('.tab-content').forEach(content => {
|
|
content.classList.remove('block');
|
|
content.classList.add('hidden');
|
|
});
|
|
container.querySelector(`#tab-${tabId}`).classList.remove('hidden');
|
|
container.querySelector(`#tab-${tabId}`).classList.add('block');
|
|
|
|
setTimeout(() => {
|
|
initSwiper(tabId);
|
|
initLightbox(tabId);
|
|
}, 100);
|
|
});
|
|
});
|
|
|
|
// Thumbnails
|
|
container.addEventListener('click', (e) => {
|
|
if (e.target.closest('.thumbnail')) {
|
|
const thumbnail = e.target.closest('.thumbnail');
|
|
const index = parseInt(thumbnail.getAttribute('data-index'));
|
|
const activeTab = container.querySelector('.tab-content.block');
|
|
const tabId = activeTab.id.replace('tab-', '');
|
|
|
|
if (swipers[tabId]) {
|
|
swipers[tabId].slideToLoop(index);
|
|
}
|
|
|
|
updateThumbnails(tabId, index);
|
|
}
|
|
});
|
|
|
|
const firstTab = container.querySelector('.tab-button.active');
|
|
if (firstTab) {
|
|
const tabId = firstTab.getAttribute('data-tab');
|
|
setTimeout(() => {
|
|
initSwiper(tabId);
|
|
initLightbox(tabId);
|
|
}, 100);
|
|
}
|
|
} |