Need help linking image inside lightbox to correct CMS entry

Ask the community
, , ,
1

Question:
How can I get an image inside a lightbox to be the same as the (CMS linked) image on a webpage?

Product:
Wix Studio

What are you trying to achieve:
I’m working on an artwork gallery. The CMS collection contains all the artwork (images, titles, descriptions, etc.) When someone is on the dynamic (item) page for any piece of art they will see a thumbnail of the artwork, the title, description, etc. When they click on the image thumbnail I have it open a lightbox, where they can see a larger version of the image.

The problem:
When I link the image inside the lightbox to the CMS collection (and select the image field), it populates with a seemingly random image from the collection, instead of the image they just clicked on the dynamic item page. How can I have the image inside the lightbox the larger image) show the same image they just clicked on from the dynamic item page (the thumbnail)?

What have you already tried:
I tried a few things from ChatGPT, including the following code in the Global Code section, with no luck (I’m terrible with JS):

$w.onReady(function () {
   
    $w('#artImage').onClick(() => {
        const src = $w('#artImage').src;

        $w('#artLightbox').show()
            .then(() => {
                $w('#lightboxImage').src = src;
            })
    });
});

Additional information:
#artImage is the image on the dynamic list page (that correctly shows the image from the CMS collection.
#artLightbox is obviously the lightbox.
#lightboxImage is the image inside the lightbox that shows the wrong image from the CMS collection.

Website: https://www.lanedemoll.com/artwork-1/born-again-pagan

Any help is much appreciated!

2

You’ll need to open the lightbox programmatically with openLightbox and use the second argument to pass data to the Lightbox (such as the src for your image).

Then within the Lightbox’s code you’ll call getContext to retrieve that data.

3

Thank you Anthony for pointing me in the right direction.

Unfortunately, I wasn’t able to get it working properly. No matter though, as my client has decided to switch platforms anyway for other reasons.

Thanks again for you help.