Overview
"MSG (Modular Sidebar Gallery) component is a Pano2VR skin component that uses CSS Grid, Fluid Typography and Pano2VR Skin Elements to create a balanced, app-like experience that intelligently adapts its shape and content based on the viewer's screen ratio."
In it’s basic form we are creating a responsive skin element (rectangle) that contains one or more images (external image), a responsive side-panel (rectangle) that contains a headline (text box) and body-copy (text box) with dynamic scrollbar. (figure #1)
Note: click on any image to enlarge it
Figure #1: Multiple image gallery with Headline and Body copy and slide counter.
In addition to image galleries MSG also provides support for simple text boxes, Youtube, Vimeo (inc 360˚ video) and local video files, Audio files (multiple playback options and multilingual support) and other user interface elements and styling. (figure #2)
Figure #2: Multiple image gallery with Headline and Body copy, Slide counter, Slide titles and Audio file
The MSG will respond to the browser/device aspect ratio/orientation and reflow the elements to suit the viewport (figure #3)
Figure #3: Responsive reflow of elements
Sample Site
This online Sample Site has working examples of the variations possible within the MSG Component.
Gallery has 17 variations (figure #4)
Video has 6 variation (figure #5)
Text/Web has 4 variations (figure #6)
Note: Clicking on the ‘warning’ icon reveals a feature that allows you to navigate to a new node and automatically open a specific MSG hotspot on that node.
Summary
The tutorials that follow will take you through the installation of the component, creating the first Image Gallery, adding Audio, implementing Multiple Languages, creating simple Text galleries and creating Video Galleries.
