Image grid click to enlarge photo

Is it possible to make a single image in the image grid clickable so that when you select the image a large view of the image opens?

1 Like

I don't know if image grid has an on click event but you could in theory set an on click event to open a modal in which you have a larger dynamic image that also changes on click.

Just looked and it indeed does have on click events.

Thanks, @stevenhdsdoor!

I agree, this is the best natively supported solution currently. You can hide the modal so that it's only accessible from the image grid

(in edit mode):

On click:

How would that work if the images are mapped and not hard coded?

Hey @nroeder! Stepping in with Tess here :slight_smile:

I think I may have a solution for you.

  1. Create a list view component
  2. Add an image component inside your list view to show your images (works if images are mapped and not hard coded!)
  3. Add an event handler to your image to run a JS query that runs return i (this is to keep track of the index of the image that was clicked since list view components provide this info
  4. Add another event handler to your image to open a modal
  5. In this modal component in your app, add an image component and set it to show the image at the specified index

See attached app JSON if you want to poke around with my setup! You can import this JSON file by clicking Create new (home page) > From JSON. Quick docs on exporting/importing apps here.