Need help with photo gallery on listing page

Need help
1

Good morning bubble fam! I am trying to figure out how to have a setup on a listing page that has a large main photo, and a list of thumbnails for the other photos. When one of the thumbnails is clicked, it becomes the large image. It would be similar to ebays photo setup

2

Hi @jynx2234 - I created a quick mockup for you using a repeating group for the thumbnails. Hopefully the mockup has enough info for you to keep going with your app.
tx
Nikolai

Here’s the editor page:

Here’s the preview page:

3

I tried messing with the workflow but I still can’t get it to work. The images are uploaded during the “create listing” process and are part of a “thing”, and I cant get the repeating group to show the current listings images. I can get a single image to appear outside of the repeating group, but thats it. Heres my app https://bubble.io/page?type=page&name=components&id=sparepcparts&tab=tabs-1

4

Just took a quick look and three things:

  1. For the RG, you need to make “Type of content” Component (and not image - Component is where you’re storing the images under the Image data field).
    image

  2. For the “Data source” field, you need to “Do a search for” and then select Component . I can’t do all the screen shots for this because I only have read-only permission and not edit (no worries)
    image

  3. Within the first cell of the RG, you have the “Dynamic image” as Current Page Component’s Images. It should be Current Cell’s Components Images.
    image

Make those changes and give it a try.

5

Thanks a bunch! I did that and got the pics showing up in the repeating group, now I need to get the big pic to be whichever one is clicked on. Im not successfully duplicating your app

6

Two things:

  1. You need to add a workflow for when the picture in the RG is clicked.
    image

  2. Make sure you send data to the right “Element”. I send data to “Element” Group Big pic in my mockup. You want to send data to Group Component

That should work for you.

7

Geez it seems so simple after you see how it works lol. Thats doing exactly what I was looking for! One more question though, when the page initially loads the big image is blank until an RG image is clicked. How would I make the page load with the first image already in the big image element?

8

Add a Workflow for when page is loaded. For “Data to display”, simply add a Search command for Pictures (Component for you). Make sure you select “first item” (or whichever one you want when page loads)

image
image912×386 31.5 KB

9

I dont know if this setup is going to work. I got it halfway working, but when I create a new test listing, pictures from other listings show up in the RG as well.

10

With multiple Listings pages, you’ll need to add a criteria in the Search so the pictures only show the relevant ones for that Listing’s page. Right now the Search doesn’t have criteria so all pictures will show up. In the Component data structure, you’ll need a data field that identifies which Component is associated with a particular Listing. Perhaps it’s Brand? If so, then use Brand = ?? in the Search criteria.

11

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