Linking a repeater item to dynamic lightbox

[Dor_Aldi]

I’m trying to link a repeater item to a lightbox that’s connected to a dataset, I managed to get the lightbox to open, however I encountered 2 issues:

1. Lightbox’s content doesn’t change to what’s in the dataset.

2. For the OnClick event I chose an image inside the repeater, but when hovering it the cursor doesn’t change so it looks like it clickable (it is clickable and opens the lightbox though)

This is the code I used for the page with the repeater:

import wixWindow from 'wix-window';

$w.onReady(() => {
    $w("#uxuiRepeater").onItemReady(($w, itemData, index) => {
        $w("#thumbimage").onClick(() => {
            const repeaterItem = itemData;
            wixWindow.openLightbox("Projects", repeaterItem);
        });
    });
});

And this is the code I used for the lightbox page:

import wixWindow from 'wix-window';

$w.onReady(function () {
    let receivedData = wixWindow.lightbox.getContext();
    $w("#image").items = receivedData.image;
});

Below is an image of the dataset fields.

Can anyone please guide me with what I’m doing wrong? How can I get the lightbox to show data from the dataset? and why does the cursor not change when hovering on the OnClick element?

Thanks a lot!!

[Pratham]

Hey Dor,

$w is a universal selector, and should not be used for repeater items unless you want all the items of each repeater element in that series to perform the same action. So you’ll have to use $item instead.

Also, would recommend switching to the new wix-window-frontend.

Page code:

import wixWindowFrontend from 'wix-window-frontend';

$w.onReady(() => {
    $w("#uxuiRepeater").onItemReady(($w, itemData, index) => {
        $item("#thumbimage").onClick(() => {
            const repeaterItem = itemData;
            wixWindow.openLightbox("Projects", repeaterItem);
        });
    });
});

---

Lightbox code:

import wixWindowFrontend from 'wix-window-frontend';

$w.onReady(function () {
    let receivedData = wixWindow.lightbox.getContext();
    $w("#image").src = receivedData.image;
});

Make sure to unlink the lightbox from the repeater in the editor itself, else it may conflict with the code.

[Dor_Aldi]

Thanks a lot @Pratham!
I managed to get it to work.

Now I have another question - is it possible to lock page scrolling when the lightbox is opened?