Добавляем lightbox для галереи Gutenberg без плагинов

В стандартном модуле галереи Gutenberg для CMS WordPress нет привычного всем просмотра увеличенных изображений при помощи Lightbox (всплывающего окна) с возможностью переключаться между ними в увеличенном режиме. Сегодня мы научим вас делать это при помощи обычного сниппета, который вы можете использовать в плагине Code Snippets.

function custom_lightbox_script() {
    ?>
    <style>
		
        /* Стили для Lightbox */
        .custom-lightbox {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 9999999;
        }

        .custom-lightbox img {
            max-width: 90%;
            max-height: 90%;
            border-radius: 8px;
            position: relative;
			animation: ambientWave 4s infinite alternate ease-in-out;
        }

        .custom-lightbox .lightbox-close {
            position: absolute;
            top: 15px;
            right: 25px;
            font-size: 30px;
            color: white;
            cursor: pointer;
            z-index: 10000;
        }

        /* Стили для стрелок */
        .custom-lightbox .lightbox-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: 40px;
            color: white;
            cursor: pointer;
            z-index: 10000;
            padding: 10px 15px;
        }

        .custom-lightbox .lightbox-prev {
            left: 20px;
        }

        .custom-lightbox .lightbox-next {
            right: 20px;
        }

    </style>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const lightbox = document.createElement("div");
            lightbox.classList.add("custom-lightbox");
            lightbox.innerHTML = `
                <span class="lightbox-close">&times;</span>
                <span class="lightbox-arrow lightbox-prev">&#10094;</span>
                <img src="" alt="lightbox image">
                <span class="lightbox-arrow lightbox-next">&#10095;</span>
            `;
            document.body.appendChild(lightbox);

            const lightboxImage = lightbox.querySelector("img");
            const closeButton = lightbox.querySelector(".lightbox-close");
            const prevButton = lightbox.querySelector(".lightbox-prev");
            const nextButton = lightbox.querySelector(".lightbox-next");
            let currentIndex = 0;
            let images = [];

            // Собираем все изображения внутри галерей и оборачиваем их в ссылки, если их нет
            document.querySelectorAll(".wp-block-gallery img, .wp-block-image img").forEach((img, index) => {
                let parent = img.parentNode;
                if (parent.tagName !== "A") {
                    let link = document.createElement("a");
                    link.href = img.src;
                    parent.replaceChild(link, img);
                    link.appendChild(img);
                }
                images.push(img.src);
                img.parentNode.addEventListener("click", function(event) {
                    event.preventDefault();
                    openLightbox(index);
                });
            });

            function openLightbox(index) {
                currentIndex = index;
                lightboxImage.src = images[currentIndex];
                lightbox.style.display = "flex";
                document.body.style.overflow = "hidden";
            }

            function closeLightbox() {
                lightbox.style.display = "none";
                document.body.style.overflow = "";
            }

            function showPrev() {
                currentIndex = (currentIndex - 1 + images.length) % images.length;
                lightboxImage.src = images[currentIndex];
            }

            function showNext() {
                currentIndex = (currentIndex + 1) % images.length;
                lightboxImage.src = images[currentIndex];
            }

            closeButton.addEventListener("click", closeLightbox);
            prevButton.addEventListener("click", showPrev);
            nextButton.addEventListener("click", showNext);

            lightbox.addEventListener("click", function(event) {
                if (event.target === lightbox) {
                    closeLightbox();
                }
            });

            document.addEventListener("keydown", function(event) {
                if (lightbox.style.display === "flex") {
                    if (event.key === "ArrowLeft") {
                        showPrev();
                    } else if (event.key === "ArrowRight") {
                        showNext();
                    } else if (event.key === "Escape") {
                        closeLightbox();
                    }
                }
            });
        });
    </script>
    <?php
}

add_action('wp_footer', 'custom_lightbox_script');