Skip to main content

I’m trying to create an app that shows artworks.

One page shows many pics.

When you click a pic, it navigates to another screen with a larger copy of that pic and other info.

Is there a way to have each pic open the screen with the big pic without having to create a new big pic screen for each artwork?

I was looking up variants and overlays, but neither seemed like what I’m looking for.


Thanks for your advice!

One way could be, you create component set of big pics and reduce them to thumbnail on the trigger page.

See below, I used Birds as component set with each Big pic assigned a click event to open the overlay and set the overlay state to variable of big pic.

So when you click thumbnail, it sets the image variable to clicked image and that state is loaded in overlay.







Result:


Thanks for the helpful tip and illustrations, Vishal. Kind of you to put that info together for me. That is a handy way of presenting big overlays. Thanks again!


No probs Mary. If it has worked for you, please mark the answer as Solution 🙂


You provided a very good guide to making an overlay, but it is not the solution I was seeking.


I am hoping that there is a way to have the one screen with many thumbnail images. When a thumbnail image is clicked, it navigates to a different screen where it fills a larger image frame with the selected thumbnail image, instead of having to make a new screen for each larger image and text.


I appreciate your well-presented and thoughtful solution!


You can use Navigate to next frame instead of overlay. Since it’s driven by variable, it will work in the same way.


Reply