Rich Text Lightbox Image Viewer

Enhances the functionality of images within a rich text block by turning them into a lightbox image viewer.


document.addEventListener("DOMContentLoaded", function() {

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

    // Function to close the lightbox
    function closeLightbox() {
        // Restore scrolling on the page = "auto";

        // Remove the lightbox backdrop

        // Update the lightbox state
        isLightboxOpen = false;

    richTextImages.forEach((image) => {
        // Change the cursor to a pointer when hovering over each image = "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
   = "hidden";

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

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

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

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

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

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

            // 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");

            // 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");

            // 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
   = "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


This JavaScript code enhances the functionality of images within a rich text block by turning them into a lightbox image viewer. The lightbox viewer allows users to view images in a larger size in a modal dialog overlay without navigating away from the current page. This provides a better user experience for image viewing within a web page.


To integrate this functionality into your Webflow project:

  1. Identify Rich Text Block: Add an id attribute with the value #content to the rich text block where you want to enable the lightbox functionality for images.
  1. Insert JavaScript Code: Paste the provided JavaScript code just before the closing body tag in your Webflow project. This code will automatically detect images within the rich text block with the specified id and enable them for the lightbox viewer.
  1. Publish and Test: Publish your Webflow project and test the functionality on the live website to ensure that images within the rich text block now act as lightbox images.


By following these simple steps, you can easily enhance the image viewing experience within your Webflow project by enabling images inside rich text blocks to function as lightbox images. This provides users with a convenient way to view images in a larger size without disrupting their browsing experience.

Need a Custom Webflow Solution?

If you're in search of a solution, we're more than happy to offer our consultation services for free. We can provide you with a roadmap that shows you how you can achieve the desired results. If you want us to proceed with building the solution, we would be delighted to do it for you.