Implementation of an image gallery in Studio


Hi there,

We’ve created a simple project to show you how to implement an image gallery using Studio! :slight_smile: To download it, click here: image_gallery.zpp (272.6 KB).

Please note that the image gallery proposed here is very basic and different from the Designer’s “Photo Album” feature, which would be more complex to implement.

How does the experience work?

  • Images are shown individually and you can display the previous/next image by pressing the previous and next buttons at the bottom of the screen.

  • You can zoom in on an image and make the previous and next icons vanish by tapping the image displayed. You can then return to the gallery by tapping the image again.

What’s in the Studio project?

  • Two groups of objects: the ‘buttons’ and the ‘images’ groups that are in the Hierarchy. Please, note that the pictures used can be replaced with others by changing the material and scale of the objects belonging to the ‘images’ and ‘buttons’ groups.

  • Two controllers with multiple states: ‘images controls’ and ‘images zoom’ in the Controllers panel. ‘images controls’ allows you to move through the image gallery while ‘images zoom’ allows you to zoom in on images.

  • Scripts: in the Hierarchy, a pointerdown script is attached to each image belonging to the ‘images’ group. This is where the image’s zoomed in state (‘images zoom’ controller) is activated. Also, you’ll find a ‘button_script’ in the ‘buttons’ group: rather than having a pointerdown script per button, we’ve gathered both of them in one script as they use the same boolean variables. This is where the ‘images controls’ are activated. To understand how the scripts work, feel free to take a look at the comments available in the project.

Let us know if you have any questions.

Best wishes,

Make a SlideShow
Can Widget code be added the Studio?

Hi Margaux

Is it possible to make a slideshow in 3d view.In your introductory video where the plane moves as the printed handout is moved by the person.Same feature with multiple images.Please help.

Thanks & Regards.
I shall attach a zpp file where i have loaded with three images.I want it to move using the arrow buttons rather than overlaping each otherimage_gallery.zpp (272.6 KB)



Could you please send over the URL of the video you’re referring to, and give us a bit more details on what you’re looking to do?

Thank you,



I am looking at adding a set of images.So when a person clicks on the button a set of images should open.
I am talking about the introduction to studio video.

Thanks & Regards



To display a set of images when users press a button, you could use a controller and states. There would be a default state in which the images would be hidden, and a state in which they would be visible. The second state (images visible) would be activated when the button is pressed.

To learn more about controllers and states, you can take a look at the article linked here. Also, you can read the Creating Buttons article to discover how to use pointerdown scripts. :slight_smile:



.I am attaching a zapcode where you can see an option our story.When you click on that a set of images open.I want similar thing to happen.Could you please suggest?

Thanks & Regards


I’ve replied in your other topic :slight_smile:


can u please explain how u had added SAVE THE DATE feature to this ZAP SCAN ?


Hi There,

You can use the Z.Calendar object to create calendar events that the user can save on their device.

It’s also possible to do this in Widgets and Designer using the calendar widget.