full

template-parts/la-components/blocks/simple-gallery/simple-gallery.js

@@ -0,0 +1,126 @@
+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();
+        });
+    }
+}