Streaming live at 10am (PST)

Suppress Light Box Popup

Sorry for cluttering this forum with so many questions and issues.
I’m new to this, and I get stuck every now and then. This forum is a blessing!

Ok. Here it goes:

I added a light box to the Product template (e-commerce).
I set it up so that it has room for 4 thumbnails below the main product image.
When the user clicks the main image or one of the thumbs, a popup window is triggered, with an enlarged image and slider arrows to the side let the user go through the four (enlarged) images within the popup.

No popup. When clicking on the thumbnails the main/large image is swapped and shows (a larger version of the) image of the thumb clicked.

How can I achieve that?


Here is my site Read-Only: Webflow - OIC_Wireframes_061321
(how to share your site Read-Only link)


You can achieve this using some JS Code.

  1. Add an window.onload function that finds all those little boxes
  2. Add a click event listener to every single one of them
  3. The click function should get the image from the smaller ones and add it as a background to the large one

Thank you, PixZen!
I’m still relatively new to all this.
Can you explain this in more detail, more step-by-step? Thank you!

Maybe I have to explain it a bit better myself.
Example based on the above attached image:

  • clicking on main image A shouldn’t trigger popup/enlargement
  • clicking on thumb B should swap main image A to main image B (no popup)
  • clicking on thumb C should swap main image to image C (no popup)
    and so fort.
    I should probably mention that all the images and thumbs involved are currently part of a Light Box and are pulled from Products in the CMS.


Could you give me a link to your website


Here’s the read-only:

Basically this:

(this is part of a Light Box, and the images are being pulled from the CMS)

I can’t figure it out!