Changes images in a popup

dcor123 · 2024-09-10T23:02:03.408Z

I am looking to change the image in my popup.
Currently the popup looks like the following below. I want to create a workflow where i click on the smaller images and the larger image is replaced by the smaller one. I cannot seem to figure this out at all and any help would be appreciated.

I know its probably a simple solution.

Also, the more context you provide with your questions (screenshots, link to an open app, etc.), the more likely you’ll get good help quickly

Screenshot 2024-09-10 at 16.00.06880×1090 78.9 KB

J805 · 2024-09-11T00:18:26.270Z

Hmm Good question.

There are many ways to do this. The way I would probably do it, since it’s a popup, would be to create a state on the popup and save the image you click on into that state. Then just display the state in the main image so it switches when you click on the next image. Does that help? Or do you need an example?

eliot1 · 2024-09-11T08:37:14.542Z

I think @J805 is right. A custom state might be a good solution here.
But maybe use a type ‘Number’ to save the index of the RG below and not a type ‘Image’.
And show the RG’list of images:item #[custom state]. So you can also easily add previous/next buttons in the border of the main image if you want to.

dcor123 · 2024-09-11T14:16:05.007Z

Thanks a lot, do you mean custom states for each image?

i’d love to see an example,
thanks

dcor123 · 2024-09-11T14:17:22.798Z

Hi thanks for the response.
Could you give me an example please especially as it relates to saving the index
thanks

eliot1 · 2024-09-11T14:28:31.610Z

Yes quickly made this demo:

image673×785 109 KB

Setup:

Group colum with Main Image and Repeating Group (RG) of the product images.
RG type here is image and data sources the product images
This page has a custom state “mainImgIndex” type number, default to 1
Main image data source is:

image926×824 27.8 KB

Workflow:

When an image from the RG is clicked:

image653×544 14.6 KB

Hope this will help

J805 · 2024-09-11T15:53:47.887Z

@dcor123 Here you go, here is an example for you:

Editor: testApp42wCleanDB | Bubble Editor

Preview: https://testapp42wcleandb.bubbleapps.io/version-test/changes_images_in_a_popup?debug_mode=true

Screenshot 2024-09-11 at 8.53.22 AM1920×1035 145 KB

Does that help? Let me know. Thanks!

dcor123 · 2024-09-11T19:38:01.412Z

thanks I got it working, it was the custom states part that i was doing incorrectly,
i really appreciate the demo and helping me out
thanks

dcor123 · 2024-09-11T19:38:39.978Z

thanks I got it working, it was the custom states part that i was doing incorrectly and your access to the editor was really helpful.
i really appreciate the demo and helping me out
thanks

J805 · 2024-09-11T20:29:23.082Z

Glad that helped.

system · 2024-11-19T23:02:43.239Z

This topic was automatically closed after 70 days. New replies are no longer allowed.