Lightbox Image Viewer

document.addEventListener("DOMContentLoaded", function() {
    initializeLightbox();
});

let isLightboxOpen = false; // Variable to track if the lightbox is open

function initializeLightbox() {
    // Find all images within the #content container
    const richTextImages = document.querySelectorAll("#content img");

    if (richTextImages.length === 0) {
        // Exit the function if no images are found
        return;
    }

    // Function to close the lightbox
    function closeLightbox() {
        // Restore scrolling on the page
        document.body.style.overflow = "auto";

        // Remove the lightbox backdrop
        document.body.removeChild(lightboxBackdrop);

        // Update the lightbox state
        isLightboxOpen = false;
    }

    richTextImages.forEach((image) => {
        // Change the cursor to a pointer when hovering over each image
        image.style.cursor = "pointer";

        // Add the lightbox-related classes to the image
        image.classList.add("w-lightbox-trigger"); // Example class name

        // Attach a click event listener to open the lightbox
        image.addEventListener("click", (event) => {
            event.preventDefault(); // Prevent the default link behavior

            // Disable scrolling on the page
            document.body.style.overflow = "hidden";

            // Create a lightbox backdrop with styles
            const lightboxBackdrop = document.createElement("div");
            lightboxBackdrop.classList.add("w-lightbox-backdrop"); // Example class name
            lightboxBackdrop.style.transition = "opacity 300ms ease 0s";
            lightboxBackdrop.style.opacity = "1";
            document.body.appendChild(lightboxBackdrop);

            // Create a lightbox container with styles
            const lightboxContainer = document.createElement("div");
            lightboxContainer.classList.add("w-lightbox-container"); // Example class name
            lightboxBackdrop.appendChild(lightboxContainer);

            // Create a lightbox content wrapper with styles
            const lightboxContent = document.createElement("div");
            lightboxContent.classList.add("w-lightbox-content"); // Example class name
            lightboxContainer.appendChild(lightboxContent);

            // Create a lightbox view with styles
            const lightboxView = document.createElement("div");
            lightboxView.classList.add("w-lightbox-view"); // Example class name
            lightboxView.setAttribute("tabindex", "0");
            lightboxView.style.opacity = "1";
            lightboxContent.appendChild(lightboxView);

            // Create a lightbox frame with styles
            const lightboxFrame = document.createElement("div");
            lightboxFrame.classList.add("w-lightbox-frame"); // Example class name
            lightboxView.appendChild(lightboxFrame);

            // Create a lightbox figure with styles
            const lightboxFigure = document.createElement("figure");
            lightboxFigure.classList.add("w-lightbox-figure"); // Example class name
            lightboxFrame.appendChild(lightboxFigure);

            // Create a lightbox image with styles
            const lightboxImg = document.createElement("img");
            lightboxImg.classList.add("w-lightbox-img", "w-lightbox-image"); // Example class names
            lightboxImg.src = image.getAttribute("src");
            lightboxFigure.appendChild(lightboxImg);

            // Create a close button for the lightbox with styles
            const lightboxCloseBtn = document.createElement("div");
            lightboxCloseBtn.classList.add("w-lightbox-control", "w-lightbox-close"); // Example class names
            lightboxCloseBtn.setAttribute("role", "button");
            lightboxCloseBtn.setAttribute("aria-label", "close lightbox");
            lightboxCloseBtn.setAttribute("tabindex", "0");
            lightboxContent.appendChild(lightboxCloseBtn);

            // Attach a click event listener to close the lightbox
            lightboxCloseBtn.addEventListener("click", closeLightbox);

            // Attach a click event listener to close the lightbox when the backdrop is clicked
            lightboxBackdrop.addEventListener("click", closeLightbox);

            // Display the lightbox
            lightboxBackdrop.style.display = "block";

            // Update the lightbox state
            isLightboxOpen = true;
        });
    });

    // Listen for scroll events on the window to prevent scrolling when the lightbox is open
    window.addEventListener("scroll", () => {
        if (isLightboxOpen) {
            window.scrollTo(0, 0); // Reset the scroll position to the top
        }
    });
}