How to I create and image button connected to dataset?

Ask the community
, , , ,
1

I’ve been trying to create an image button that will be implemented inside a repeater, that why I would like for it to be connected to a dataset.

I would like the button to behave like this:

When it’s not on hover it shows the image on my dataset column called X1

When it’s on hover it shows the image on my dataset column column called X2

When I click on the button it takes me to the row of the dataset the image is from. I.E. row 1

I’ve tried the AI code, as I’m no coder and it gave me this:


import wixLocationFrontend from 'wix-location-frontend';

$w('#Project').onMouseIn(() => {
    $w('#dataset1').getCurrentItem()
        .then(item => {
            $w('#Project').style.backgroundImage = `url(${item['Featured Image (Hover)']})`;
        });
});

$w('#Project').onMouseOut(() => {
    $w('#dataset1').getCurrentItem()
        .then(item => {
            $w('#Project').style.backgroundImage = `url(${item['Portfolio Image (Fixed)']})`;
        });
});

$w('#Project').onClick(() => {
    $w('#dataset1').getCurrentItem()
        .then(item => {
            let slug = item['Portfolio Item'].slug;
            wixLocationFrontend.to(`/portfolio-item/${slug}`);
        });
});

But when I add it the only thing that is working is the on click behaviour.

For reference I’ve been tryin to reach something like this

3

could possibly be done in Studio without a single line of code.

4

Hi, Michele_Simonetti !!

As Dan mentioned, you might not even need to use code. Simply add a repeater and place two overlapping images inside it. Next, connect the repeater to your collection (make sure to connect the image elements to the specific field names in your collection).

Finally, add a hover fade-in animation to the image on top, and the functionality should mostly be complete. :raised_hands:

If you’d like to use code, please refer to the following code.

What you should do first is add a repeater to your editor, place two image elements inside it, and make sure to edit the two images (Image 1 and Image 2) to be the same size and perfectly overlap.（Place Image 2 so that it overlaps Image 1.） Then, in the properties panel, set Image 2 to be hidden by default so that it remains hidden initially.

Next, select the entire repeater and connect it to a collection via a dataset. Afterward, paste the following code into the Velo coding panel.

Make sure to edit the names of the image elements to match the element names in your code. Also, adjust the field names following itemData to match the field names in the collection you are connecting to. :wink: :+1:


import wixLocationFrontend from 'wix-location-frontend';

$w.onReady(function () {

    $w("#yourRepeater").onItemReady(($item, itemData) => {

        $item("#image1").src = itemData.image1;
        $item("#image2").src = itemData.image2;

        $item("#containerBoxInRepeater").onMouseIn(() => {
            $item("#image2").show("fade", { duration: 300 });
        });

        $item("#containerBoxInRepeater").onMouseOut(() => {
            $item("#image2").hide("fade", { duration: 300 });
        });

        $item("#containerBoxInRepeater").onClick(() => {
            wixLocationFrontend.to(itemData.destinationUrl);
        });

    });

});
5

Thank you for your reply!

Having two images overlapping is the solution I had for now. But the click on was limited to only one dynamic page, so every repeater would take me to the same page, even though the images were different.

That’s why I thought a button was needed.

Thank you again for your solution, I’ll try it when I get back home

1 Like