How can I create click to image gallery?

[adig]

Hi guys,

I have some pictures for a hotel. in a repeating group displayed in a small size, How can I create click to popup or lightbox for the pictures to display in full ize and maybe flick through them in the lightbox without exiting to see each?

[hanskiprop15]

Hey
Just set up a popup with an image element inside, then when a user clicks a picture in the repeating group, show the popup and pass the clicked image to it.
To flick through them like a lightbox, you could:
Send the whole list of images to the popup
Use a custom state (like currentIndex) to switch between them with “Next” and “Previous” buttons
It takes a little setup, but works really nicely! Let me know if you want a simple example happy to help

[adig]

I would appreciate a simple example please. My main problem is with the states.
Also, I guess it’s better to avoid plugins right?

[hanskiprop15]

Here’s the general idea without the need of a plugin:

1. Popup Setup

• Create a popup with an image element.
• Set the image’s dynamic source to a custom state (we’ll define this next).

2. Custom States

• On the popup or a hidden group, create a custom state called current_index (type: number).
• Also create another custom state to hold the list of images (type: image, list: yes).

3. Click Action in the Repeating Group

• When an image is clicked:
  • Set the image list state to the list of images (from the repeating group’s source).
  • Set the current_index to the index of the clicked image.
  • Show the popup.

4. Navigation (Previous/Next)

• Add two buttons inside the popup for Previous and Next.
• When clicked, adjust the current_index by -1 or +1 respectively.
• Make sure to add conditions so the index doesn’t go below 1 or above the total count.
• The image element source should be something like:
  Image List: item# current_index

[adig]

hey @hanskiprop15 thanks a lot. I’ve done everything but the popup is empty. here are some screen shots: