I am new to bubble (just short of a week) and still learning so please forgive me. I have gone through all the lessons, videos and have searched the forum for an answer but have yet to figure it out.
I am trying to do a product gallery similar to Amazon’s. I want to click on a small gallery image and have the large image change its image source to match the small one.
Any advise?
Hi @daniel5, welcome!
Here’s how to get started. I’m assuming you already have a product page set up set to the appropriate data type so that you can send a product record’s data to the page. Within the product type, you could have a field that is a list of images.
The repeating group on the left side would display that list of images. Type = image, source = current page product’s list of images.
Place the large image inside a group. Set that group type to = image. Create this workflow:
When current cell’s image is clicked (this is the image element inside the repeating group cell) > display data: select the group containing large image, data to display = current cell’s image.
Make sure that the dynamic source for the large image is “parent group’s image”.
Now, when you click on the small image, it will send the image data to the group, and the image element within will change dynamically.
Try that!
Gaby | Coaching Bubble
@romanmg Awesome write up! Thank you!
You are right with the assumption that I have set up a product page and it is set to the proper data type so it is displaying the correct product.
Where I have gone off track is how I am storing the images. Currently I have a single field for each image but you said to store my all my images in a list (love it!) I have made a few attempts but cannot figure out how to upload a list of images into a single field. I currently have the field set up (refer to picture below) but could you please explain how to upload a list of images into there?
So let’s say you have a button next to the image uploader… the workflow could be:
When button is clicked > make a change to a thing (identify your product. e.g. "current page’s product) > Field to change is Product images, value is “add picture uploader’s value”
This video should help if I’m understanding what you are trying to do.
@jasonwojo @romanmg thank you for your help so far!
I am trying to do as much as I can on my own but here are dead ends I am running into:
When using the multiple image field in the DB, it is not very user friendly as you cannot manually add or delete photos. Also the text for the file just runs as long as it likes across the page (look at field Product Images):
Next, I am trying to do as you explained and have the repeating group on the left side with type = image, source = current page product’s list of images. But when doing that I am getting nothing in preview:
Am I doing something wrong here?
You can also do this… have a separate data type for image and have a field under that type to link back to the product.
Product Image
And then your repeating group would instead be a Search for Product Images with the constraint Product = Current Page’s Product
As for the display… did you send product data to the page?
Tried it! Still nothing. It seems that if there is a single image uploaded into the list it will appear but not if there are multiple images…
To answer your last question, yes. Otherwise you wouldn’t be seeing the long boarding picture as show in the screen shot above.
This really should not be very hard! Is there anyone with an example app that already has a feature like this that I can view the editor and see how others have done it?
How about you share a link to your editor and I’ll take a look to see what’s going on with the way you have it set up?
Make sure your app is set to public for the moment. I promise once we find the missing link, it’ll be smooth sailing 
Sent PM.
Problem solved! Thank you @romanmg and @jasonwojo for your input.
Here is what I did in 3 easy steps:
Set up the photos in their respective field in the DB (which also offers the ability to modify each image in the backend)
Next, I set up the image thumbnails and main image. I then added conditions to the main image where I created a custom state named “mode” each mode state has a different image source. I named each mode “Image 1”, “Image 2”, etc…
Finally I made a work flow for each thumbnail. When a thumbnail is clicked > set state > element: main image > custom state: “mode” > value: “Image [matching thumbnail number]”
Simple as.
Hey Daniel! Glad you got it working with custom states! I also PMed you back with a solution involving Display Data action that would eliminate the need for managing a custom state and element conditions. Just like many things in Bubble, there’s usually more than 1 way to do something.
THANK YOU!!! @romanmg
This topic was automatically closed after 70 days. New replies are no longer allowed.
