Now that we have the MSG Components installed it’s time to create our first MSG Image Gallery.

Note: click on any image to enlarge it

Project Overview

In this tutorial, we will configure and publish our gallery by;

Step 1 - Gallery Assets
Step 2 - Assigning the Assets
Step 3 - Configuring the Point Hotspot as an Image Gallery
Step 4 - Publish and Test the Gallery
Step 5 - Adding Audio
Summary

Step 1 - Gallery Assets ⇑

Note: In this step we will create our first Image Gallery using three images, the frog, dog and cat and show descriptions of each animal.

Images

Descriptions

The Green Tree Frog is a charismatic amphibian native to Australia and southern New Guinea, celebrated for its vivid green skin and remarkable adaptability. These frogs are often found in trees, shrubs, or near water bodies, using their strong, adhesive toe pads to climb effortlessly. Nocturnal by nature, they become active at dusk, filling the air with their deep, resonant [croaks]—especially after rain. Their diet consists mainly of insects, spiders, and occasionally smaller frogs, making them valuable for natural pest control. Green Tree Frogs are also popular in the pet trade due to their docile temperament and relatively simple care requirements. They are considered environmental indicators, as their presence signals a healthy ecosystem. Their ability to change color slightly, depending on temperature and mood, adds to their intrigue. In the wild, they play a crucial role in maintaining ecological balance, while in captivity, they captivate enthusiasts with their charm and unique behaviors.|

The Staffordshire Bull Terrier, affectionately known as the "Staffie," is a medium-sized, muscular dog breed originating from England. Initially bred in the 19th century for bull-baiting and later as a companion animal, Staffies are renowned for their strength, courage, and loyalty. Despite their tough appearance, they are often described as "nanny dogs" due to their gentle and affectionate nature, especially with children. Staffies are highly intelligent, energetic, and eager to please, making them excellent family pets when properly trained and socialized. Their short, smooth coat comes in a variety of colors, including brindle, black, blue, fawn, red, and white, often with distinctive markings. Staffies thrive on human interaction and require regular exercise to keep them mentally and physically stimulated. They are known for their playful, outgoing personalities and strong bond with their owners. While their history includes aggressive tendencies, responsible breeding and training have transformed Staffies into loving, reliable companions. They are resilient, adaptable, and full of character, making them a popular choice for families and individuals alike. Their expressive faces and wagging tails often win the hearts of everyone they meet.|

A Calico Cat is distinguished by its striking tri-color coat pattern, featuring patches of white, black, and orange or cream. This coloring is almost exclusively found in female cats due to the genetics of coat color inheritance linked to the X chromosome. Calicos are not a specific breed but a color pattern that can appear in various breeds, such as the American Shorthair or Persian. Known for their spirited and independent personalities, calicos are often described as sassy, playful, and affectionate. In many cultures, they are considered symbols of good fortune—Japanese sailors once kept them on ships to ward off storms. Their unique appearance and bold personalities make them stand out among felines. While their temperaments can vary, calicos are generally loving and make wonderful companions, adding vibrancy and character to any household.

Note: I have added in the tags  to create breaks between paragraphs. When we add text to a gallery we need to make sure that it’s added as plain text and not modified in any way by the text controls in Pano2VR. You can find the complete text block, ‘frog-dog-cat.txt’ in the Tutorial_Assets > 2. Image Gallery folder in the tutorial folder.

Note: The first and second entries end with a ‘pipe’ symbol this symbol identifies the end of an individual slide image’s text block. The final paragraph doesn’t need the ‘pipe’ symbol

Step 2 - Assigning the Assets ⇑

Note: In this step we will assign the image assets so they are loaded when the project is published.

1. In the Tutorial folder open the To_Upload folder

2. Create a new folder and name it gallery (all lower case) (figure #1)

Note: the ‘gallery’ name identifies the type of popup we are creating. The other options are ‘video’, ‘text’ and ‘web’.

3. Inside the gallery folder create another folder and name it animals. (figure #1)

Note: the ‘animals’ name identifies the location of the content to show in the gallery. The content location names can be anything that identifies the content.

4. Copy the cat, dog, frog png files into the animals folder (figure #2)

Step 3. Configuring the Point Hotspot as an Image Gallery ⇑

1. In the Properties - Web Output panel open the Advanced tab and drag the ‘gallery’ folder into the Assets table (figure #3)

Figure #3: gallery added to Assets > Files or Folders

2. Save the Project

Note: now its time to populate our Custom Properties with the elements and settings we want this popup to use and function like. We will start with the Properties.

3. Click on the Point Hotpsot to make it active

4. Open the Properties - Point Hotspot panel and add the following;

ID: Gallery 1 (this can be anything you like)
Type: URL
Skin-ID: msg_popup_tmp
Title: Three of my Favourite Animals (this can be anything you like)
Target: gallery (figure #4)

5. Populate the Custom Properties

Popup Gallery ID: animals
Popup Responsive: true
Popup Image: frog | dog | cat (note: images are separated by a ‘pipe’ symbol - no ‘pipe’ at the end!)
Popup File Extension: png (if all files are the same format you can use a single entry)
Popup Title: Green Tree Frog | Staffordshire Bull Terrier | Calico Cat (note: titles are separated by a ‘pipe’ symbol - no ‘pipe’ at the end!)
Popup Inline Counter: true
Popup Body Copy: (frog-dog-cat.txt in Tutorial Assets > 2.Image Gallery)
Popup Image Shadow: true
Popup Border: true (figure #5)

6. Open the Properties - User Data panel

7. In the User Data Tab enter ‘Gallery Sample’ in the Description field (figure #6)

Note: this entry will be displayed in the ‘Sample Type’ UI text

8. Save the project as MSG_Gallery.p2vr

Step 4 - Publish and Test the Gallery ⇑

Note: Now that we have assigned the assets and populate the Point Hotspot properties it’s time to actual publish the project and check the gallery.

1. Publish the Project

The output initially shows the node with the basic UI elements including the Point Hotspot.

Mouse over Point Hotspot shows title (figure #7)
Clicking on the Point Hotspot opens the gallery (figure #8)
Clicking on the Next/Previous buttons shows a new image and new text description and the counter increases (figure #9)
Clicking into the image opens a full screen preview (figure #10)

Note: In full screen preview the right/left keyboard arrows advance the image and down keyboard closes the image. In the image there are ghosted icons showing the keys. On a mobile device swiping will advance the images.

open in a new browser tab

Note: The gallery is also responsive. The example below shows how the gallery will look if the Browser window aspect is portrait or if a mobile device is in portrait orientation (figure #11)

Step 5 - Adding Audio ⇑

Each gallery/image can have an audio file associated with the Point Hotspot. In the following steps we will add an audio file that;

Plays when the ‘Play’ button is selected
Advancing the slide will automatically play the next audio file (if the audio is currently playing)

1. Copy the cat, dog and frog mp3 files to the gallery > animals folder (figure #12)

3. Select the Gallery 1 Point Hotspot to reveal the Custom Properties

4. Update the following Custom Properties;

Audio Files: frog | dog | cat
Popup Enable Audio: true (shows the audio controls)
Popup Audio Autoplay: true (when active advancing the slide triggers the associated audio file) (figure #13)

5. Save the project as MSG_Gallery.p2vr

6. Publish the project

When the gallery is opened the audio elements are shown above the main image area.

Clicking on the Play button starts the audio playing and the seekbar scroll buttons shows the progress (figure #14)
Clicking the Play button also displays the Stop and Pause buttons (figure #15)

Figure #14: Gallery showing Audio elements

Figure #15: Audio playing, Stop and Pause buttons visible.

open in a new browser tab

Summary ⇑

At the end of this tutorial we have successfully created our first responsive Modular Sidebar Gallery using images, text and audio. In the next tutorial we will update the project to incorporate a new language, Spanish and show how the Gallery will adapt and display alternate text and audio based on the selected language.

2. Creating an Image Gallery