Implementation of an image gallery in Studio

[margaux]

Hi there,

We’ve created a simple project to show you how to implement an image gallery using Studio! 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,
Margaux

[sanghvi.inds]

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)

[margaux]

Hello,

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,
Margaux

[sanghvi.inds]

Hi

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

[margaux]

Hello,

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.

Thanks,
Margaux

[sanghvi.inds]

.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

[Mark]

I’ve replied in your other topic

[kumarnirmalasrujan]

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

[Mark]

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.

Regards,
Mark

[order]

Hey Margaux, Is there an actual tutorial to go along with this image gallery overview? I’ve downloaded the .zpp file but its a dead file, it won’t open in Zapworks.

[George]

Hi @order,

There’s not a tutorial going over the implementation of the image gallery project that has been posted by Margaux. Due to the date this project was posted, a lot of its functionalities have been improved to be made less complex.

The image gallery experience uses controllers and states to hold which image state is active. It then uses events within scripts to activate them depending on which buttons is tapped. To simplify this, you can now use actions to activate the states, meaning there is no need to use scripting.

I’d recommend checking out our brand new AR Photo Booth tutorial which uses actions to create a face tracked experience with a lot of similarities to the image gallery.

The link posted by Margaux should still work but you can also download the experience here: image_gallery.zpp (272.6 KB).

Thanks.

George
.

[order]

Thanks George, I will give it a shot. I tried downloading the image_gallery.zpp file and it won’t open in Zapworks, something about it isn’t right.
Thanks.

[George]

Hi @order,

Not a problem. If you are still having issues importing the ZPP, please try following the Importing and Exporting documentation. It will also not import if it is located in a ZIP file.

Hope this helps.

George

[bestjohnsontvc]

I truly appreciate your info.

[smartcity]

Hi,

I have managed to tailor this to use my images. I was wondering if it is possible to have one of the image files be replaced with a video file. I still want the next and previous buttons to work. I would like a video to play instead of image 3. Any example code would be very much appreciated.

James