How to match image with the CMS item I clicked on?

Ask the community
,
1

On the left of my page I have a repeater with a couple of images from my CMS.
On the right of my page I have a large image.
Desired behavior:
If I click on one of the images from the repeater, the larger image on the right should change into that same image I clicked on.

I’m currently just trying:

    $w('#Section1Repeater1').onItemReady( ($item, itemData, index) => {
        $item('#Section1RepeaterItem1MediaImage1').onClick( (event) => {
            $w("#image1").src = $w('#Section1RepeaterItem1MediaImage1').src
        })
    });

But with this code, the image on the right just changes to the default image, not to the specific image from that I clicked on.

2

Hey @user86!

Sounds like a super interesting project. It looks like you’re along the right tracks, and super close.

$w('#Section1Repeater1').onItemReady(($item, itemData, index) => {
        $item('#Section1RepeaterItem1MediaImage1').onClick((event) => {
            $w("#image1").src = $item('#Section1RepeaterItem1MediaImage1').src
        })
    });

In this line $w("#image1").src = $item('#Section1RepeaterItem1MediaImage1').src you need to update $w to $item

I’d also recommend using camelCase on element names, so something like rightImage

Hope it helps :slight_smile: