A preview window not showing an image from a gallery at start

[superremontbg]

Hi everyone,

I have a marketplace and on the product’s page I have difficulites showing the first image from the gallery in the preview large image. It stays empty/white until a picture from the gallery has been clicked. I’m using custom state but for some reason is not working. Could someone have a look in my workflow and tell me where is my mistake?

In the group which contains the preview image and the gallery repeating group, I set a custom state selected_image_item as an image. Then I created a workflow when this group is clicked to set a state to an element. The element is this same group and custom state is the same selected_image_item and the value is parent group’s product’s gallery’s first item.

The gallery is a repeating group and there is a workflow when an image is clicked to show in the large image preview. However now it stopped working as the state workflow is not working.

Many thanks in advance!

[J805]

Hey @superremontbg

Hopefully we can help you out.

Are you setting the default stat on page is loaded?

[superremontbg]

Hey J805

I’m not sure what you mean… could you please explain as I’m not that familiar with states.

Best,

[J805]

@superremontbg

In the group which contains the preview image and the gallery repeating group, I set a custom state selected_image_item as an image. Then I created a workflow when this group is clicked to set a state to an element.

Sure, you said here that you are setting a state once you click an image right?

So you need to do the same thing on a ‘Page is loaded’ workflow. Set an image there so it has a default.

[superremontbg]

Hey,

hm do you mean the workflow which takes you from the products list to the individual product page? What element should have the same state, the page itself?

p.s. sorry if my questions are very dummy, I’m not a bubble developer and just learning how to create my own website now

Best,

[J805]

Ok, got it. No worries. Let me just show you then. I will set up an example for you.

[J805]

Ok here is an example that you can look at that uses a state that we set on the ‘page is loaded’ workflow so the image isn’t blank by default. Check it out:

Editor: Forum Test App | Bubble Editor

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

Hope that helps!

[superremontbg]

Hi J805,

many thanks for your time and the effort showing me this. I tried copy the settings but it still not working for me. When loading the page the preview is still empty. However clicking on the pictures in the gallery is working now. Could you please check if the next steps are right? I can’t see where my mistake is on the way…

1. I put two states on the page: image title and large image as type image:

   

2. Then I created a group with the large image and the RG of the gallery. Type of content is item:

   

3. In the repeatinggroup the image is a dynamic image:

   

4. The workflow of the picture in the RG is:

   
   

5. Finally, the preview image is set to the custom state:

   

Sorry for taking so much time of yours. Your help is truly appreciated!

Best,

[carlovsk.edits]

Based on @J805’s example, you need to create a workflow that runs when the page loads to set the first image before the user clicks on any others.

In other words, when the page loads, you set the state, retrieve the repeating group, and get the first item.

Just like in his example:
Forum Test App | Bubble Editor

To avoid having to create a page is load workflow, you could set the initial content of your larger image as the first item in the repeating group, and then simply create a conditional statement for when the custom state is not empty, at which point you display the image from that state in the larger image.

[J805]

Yeah, the only step you are missing now is using the same step 4 but on a ‘Page is Loaded’ workflow as @carlovsk.edits mentioned.

[J805]

Use this button to create the ‘page is loaded’ workflow.

[superremontbg]

Amazing! Thank you so much! Now its working and I finally learned how to create the right steps

[J805]

Awesome. Glad it helped.