Change Image Using Dynamic Embed

Design help Custom code
1

Hello,

I am looking to change an image when I click on a div block. Sounds easy but it gets a bit complicated -

We will call the image that will be changed “PreviewDiv”

The div block that will be clicked is a radio button inside a collection list.
This radio button div block contains an image linked to the collection list’s “Main Image”.

When I click the radio button div block to select the button, I would like to change the image of an outside “PreviewDiv” block to the “Main Image” that is linked to the individual radio buttons within the collection.

I have written some custom code that looks like this.

<script>

    var button = document.getElementById('Radio Button Field');

	button.onclick = function getImage() {
    
            var image = button.src;
            document.getElementById("PreviewDiv") = image;
    
    }
    
</script>

I don’t get errors when checking the console but I am not able to accomplish this. Any help would be appreciated.

To see what I’m trying to do in action visit the “Heys Template” page

https://preview.webflow.com/preview/model-1-sales?utm_medium=preview_link&utm_source=dashboard&utm_content=model-1-sales&preview=4ec490389b5f3662cab7120b5e7e55f6&mode=preview

This is the page I am trying to solve the issue on in its published version:

https://model-1-sales.webflow.io/yo/sup

The current code is only in the “Choose a Stock” dropdown, not the other tabs.

2

Hey Cody,

You don’t need to use custom code to achieve this effect. It can be done relatively simply inside of Webflow’s Interactions panel.

Assuming that each collection list has the “Main Image” and “Preview Image” fields, then in the designer you will want to create two image elements. Make sure to set one of them to pull the image from “Main Image” and the other from “Preview Image”.

After that, create an “on mouse click” interaction for the Collection Item, or in your instance, the radio button that’s inside the collection item. The key thing here is setting your initial state for the “Main Image” to hidden, while setting the “preview image” to show. Then on click you want to hide the “preview image” and reveal the “main image”. You can accomplish the same effect using different interaction types as well.