document.addEventListener('DOMContentLoaded', function () { 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() { // Ждем загрузки GLightbox const checkGLightbox = () => { if (typeof GLightbox !== 'undefined') { const selector = `#${blockId} .glightbox`; if (lightbox) { lightbox.destroy(); } lightbox = GLightbox({ selector: selector, preload: false, touchNavigation: true, loop: true }); } else { // Пробуем еще раз через 100мс setTimeout(checkGLightbox, 100); } }; checkGLightbox(); } 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) { const slides = hasMultipleImages.querySelectorAll('.swiper-slide'); const isSingleSlide = slides.length <= 1; // Инициализируем свайпер для миниатюр thumbnailSwiper = new Swiper(`#${blockId} .thumbnail-swiper`, { slidesPerView: 'auto', spaceBetween: 6, freeMode: true, grabCursor: true, watchSlidesProgress: true, }); // Инициализируем основной свайпер mainSwiper = new Swiper(`#${blockId} .gallery-swiper`, { loop: true, slidesPerView: 'auto', spaceBetween: 0, grabCursor: true, watchSlidesProgress: true, lazy: { loadPrevNext: true, loadOnTransitionStart: true, }, pagination: { el: `#${blockId} .simple-gallery-swiper-pagination`, type: 'bullets', clickable: true, bulletClass: 'swiper-pagination-bullet', }, on: { slideChange: function () { updateThumbnails(this.realIndex); centerThumbnail(this.realIndex); } } }); // Скрываем элементы навигации при одном слайде if (isSingleSlide) { const pagination = container.querySelector('.simple-gallery-swiper-pagination'); const thumbnailContainer = container.querySelector('.thumbnail-swiper').parentElement; if (pagination) pagination.style.display = 'none'; if (thumbnailContainer) thumbnailContainer.style.display = 'none'; if (mainSwiper.autoplay) { mainSwiper.autoplay.stop(); } } // Инициализируем лайтбокс initLightbox(); // Обработчик кликов по миниатюрам container.addEventListener('click', (e) => { const thumbnail = e.target.closest('.thumbnail'); if (!thumbnail) return; const index = parseInt(thumbnail.getAttribute('data-index')); if (mainSwiper) { mainSwiper.slideToLoop(index); } updateThumbnails(index); centerThumbnail(index); }); // Очистка ресурсов при выгрузке страницы window.addEventListener('beforeunload', () => { if (mainSwiper) mainSwiper.destroy(); if (thumbnailSwiper) thumbnailSwiper.destroy(); if (lightbox) lightbox.destroy(); }); } }