Changes images in a popup

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 :slight_smile:

Hmm :thinking: 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? :blush:

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.

1 Like

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

i’d love to see an example,
thanks

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

Yes quickly made this demo:

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:

Workflow:

Hope this will help :slight_smile:

@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

Does that help? Let me know. Thanks! :blush:

1 Like

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

1 Like

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

1 Like

Glad that helped. :blush: