Recently I’ve been working with Pano2VR V7 beta to explore the possibilities that Custom Properties offer in regard to creating reusable components for Virtual Tours.

Creating Point Hotspot popup galleries and video components involve a lot of work in the Skin Editor especially in the area of mobile compatibility and customisation.

To that end I’ve developed a project file and skin that facilitates the development and customisation via the Custom Properties rather than the Skin Editor.

As the development currently stands the following seven popups can be created via the Custom Properties.

Information Popup: this is a text only popup in a square container. It has a headline and body text.
Gallery Square: a gallery popup with in a square container. It has a headline, image, slide titles and optional gallery description or individual slide descriptions. The container retains its aspect regardless of the Desktop browser/iPad aspect ratio.
Gallery Landscape: a gallery popup with in a landscape container. It has a headline, image, slide titles and optional gallery description or individual slide descriptions. The container retains its aspect regardless of the Desktop browser/iPad aspect ratio.
Gallery Portrait: a gallery popup with in a portrait container. It has a headline, image, slide titles and optional gallery description or individual slide descriptions. The container retains its aspect regardless of the Desktop browser/iPad aspect ratio.
Gallery Responsive: a gallery popup with in a responsive container. It has a headline, image, slide titles and optional gallery description or individual slide descriptions. The container changes its aspect to reflect the Desktop browser/iPad aspect ratio.
Video Popup: a video popup in a fixed ratio container. It has a headline, video and video description. The container supports Vimeo, YouTube and Local video files. The container retains its aspect regardless of the Desktop browser/iPad aspect ratio.
Web Popup: a web popup with in a responsive container. It has a headline, URL and option to open in the tour or in a target. The container changes its aspect to reflect the Desktop browser/iPad aspect ratio and automatically opens in a target on Mobile devices or devices with touch.

Note: in the case of the iPhone the predefined aspect ratio is replaced with a ratio that best fits the iPhone screen.

This article contains examples and settings of the different popups available. Each example has a sample tour that shows the popup in operation.

In turn each sample tour has two versions; Plain and Outline. Plain is a simple popup with only the basic elements. Outline adds styling including a shadow background, round corners and an outline.

The gallery popup will be shown in three variations: Image only, Gallery Description and individual Slide Description. A gallery description remains the same for all slides while an individual slide description is unique to each slide.

Note: clicking on the text block opens it to fill the container

Open example of all the popups (plain & Outline)

All of the popups have been tested on the Mac Desktop, iPhone 13 Pro, iPhone 11 Pro and iPad Pro (12.9 inch 5th Generation). Further testing on Android and other browsers is underway and any feedback is appreciated.

Each example contains a list of the settings for the particular version.

Other Styling

Other styling options are available including element colors exposed in the Edit Skin Configuration window (global) or individual element colors via predefined CSS swatches.

Element colors changed via Edit Skin Configuration (global)

Element colors changed via Custom Properties (individual)

Responsive, Popup for Gallery, Text, Video & Web

Other Styling

Tony Redhead