Viewing virtual tours on small mobile devices can be problematic, especially when the interface has popups such as videos and galleries. I think the preferred orientation for small mobile devices is portrait, as it can accommodate the interface, menus and popups in a much more readable format.

Alternatively, the landscape orientation is suitable for viewing panoramas and videos. To that end, I have implemented 2 options for the landscape view.

Variation #1 Splashscreen with current panorama

The view below shows the “Portrait” view of the node including all of the mobile interface elements.

The view below shows the current node without any of the user interface elements only a small “rotate” graphic and information on viewing the tour.

Mobile Splashscreen showing the current node, “rotate” graphic and information on viewing the tour.

Note: the current node panorama is active and can be panned and zoomed.

Mobile Splashscreen showing the current node panned to a new viewpoint

Edit Skin Configuration settings for the Mobile Splashscreen shown above

PREVIOUS NEXT BUTTONS

The previous/next buttons allow you to move backward or forward through nodes designated by a tag name set in the Edit Skin Configuration. Nodes that do not have the tag are bypassed and not shown.

Previous/Next Buttons are under the headings GENERAL SETTINGS and MOBILE SPLASH.

Edit Skin Configuration

Under General Settings, there are three Previous/Next configurations;

Previous Next Buttons [Desktop]
Previous Next Buttons [Mobile]
Previous Next Buttons [Reference Tag]

Checking either the Desktop or Mobile configuration will display the Previous Next buttons on all nodes except the Splashscreen.

A custom Reference Tag can be created (the default is prevnext) and then used in a tag added to those nodes excluded from view in Previous Next.

Under Mobile Splash, there is one Previous/Next configuration;

Mobile Splash - Previous/Next

Checking this configuration

Mobile Splashscreen showing the currnet node, “rotate” graphic, nformation on viewing the tour and the Previous Next buttons.

Clicking on the Previous button takes us to the previous node panorama

Note: under Scenario #1 the Image Name and Display Title, if entered will have no effect. The same applies to the CSS Blur Filter.

Scenario #2 Splashscreen with current panorama

This view shows the current node with the Splashscreen overlaid.

#3 Splashscreen with Display image

This view shows a Display image with the Splashscreen “rotate” graphic and other textural information. There are a number of variations as shown below.

Mobile Splashscreen with Display Image and “rotate” graphic and instructions

Mobile Splashscreen with Display Image, “rotate” graphic, instructions and Display Title

Note: The style used for the Display Title is “.mobrotatetitle” found in the Draw Code Element “font_classes” found in the container “IND_CODE ELEMENTS” in the skin. To use a different font replace the current font-family with the required one.

Code Element “font_classes” showing some of the current font classes available in the tour

Mobile Splashscreen with Display Image, “rotate” graphic, instructions, Display Title and CSS Blur Filter

Note: under Scenario #2 the Previous/Next, if checked will have no effect.

MOBILE LANDSCAPE VARIATIONS

Tony Redhead