Suppress Light Box Popup

Design help General
1

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:

IS:
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.

WANT:
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?

Thanks!

Webflow_LightboxSupress
Webflow_LightboxSupress4584×2060 439 KB

Here is my site Read-Only: https://preview.webflow.com/preview/oic-wireframes-sg-test-2bcd2d84bf3423d9?utm_medium=preview_link&utm_source=designer&utm_content=oic-wireframes-sg-test-2bcd2d84bf3423d9&preview=67d6cc255726c5fa9db030eebf3f2545&pageId=60c235c9cc51ad388074d632&itemId=60c235c9cc51ad88dd74d698&workflow=preview
(how to share your site Read-Only link)

2

Hello,

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
3

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.
4

Hello,

Could you give me a link to your website

Thanks

5

Sure!
Here’s the read-only:
https://preview.webflow.com/preview/oic-wireframes?utm_medium=preview_link&utm_source=designer&utm_content=oic-wireframes&preview=67d6cc255726c5fa9db030eebf3f2545&pageId=60c235c9cc51ad388074d632&itemId=60c235c9cc51ad88dd74d698&workflow=preview

Basically this:

LightBox_popup_supress
LightBox_popup_supress1954×800 95.2 KB

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

6

Anyone?
I can’t figure it out!