Appearance
360° Image Viewer
The 360° Image Viewer turns an equirectangular panorama into a scene visitors can look around, by dragging, by keyboard, or by moving a phone. Hotspots can mark points inside the panorama and open a short caption.
Adding the element
Add an element in the YOOtheme Pro builder and pick 360° Image Viewer from the Planckie Elements group. The builder shows the standard image placeholder until you select a panorama; the element needs one to render at all.
Use an equirectangular panorama, the format any 360° camera and most phone panorama modes produce. A 2:1 source ratio is what the projection expects. A regular photograph will load, but it will look stretched, because it does not wrap around.
Content
| Option | Description |
|---|---|
| Image | The equirectangular panorama. Required. |
| Image Alt | Alt text for the panorama. It also becomes the accessible name of the viewer when ARIA Label is empty. |
| Hotspots | Points inside the panorama, added as items. |
Hotspot items
| Option | Description |
|---|---|
| Title | Heading of the hotspot caption. |
| Text | Body of the caption. |
| Pitch | Vertical position, -90° to 90°. Default 0. |
| Yaw | Horizontal position, -180° to 180°. Default 0. |
A hotspot with neither title nor text is skipped, so an item left blank costs nothing. Pitch 0 is the horizon and yaw 0 is the direction the panorama starts from, so placing a marker is a matter of nudging both values until it lands where you want it.
Settings
Viewer
| Option | Description |
|---|---|
| Loading | On by default: the viewer starts with the page. Switched off, the element shows the panorama as a still poster with a play button, and the scene loads when a visitor asks for it. |
| Initial Pitch | Where the view starts vertically, -90° to 90°. Default 0, the horizon. |
| Initial Yaw | Where the view starts horizontally, -180° to 180°. Default 0. |
| Initial Zoom (HFOV) | Horizontal field of view, 50 to 120. Default 100. Lower values are more zoomed in. |
Controls
| Option | Description |
|---|---|
| Zoom Controls | Zoom in and out buttons. On by default. |
| Fullscreen Button | Fullscreen toggle. On by default. |
On a phone or tablet the viewer also offers its device orientation toggle, which lets visitors look around by moving the device.
Layout
| Option | Description |
|---|---|
| Aspect Ratio | None, 16:9, 4:3, 3:2, 2:1 or 1:1. Unavailable once a height is set below. |
| Width / Height | Maximum width and the height in pixels. The width stays responsive and never exceeds the available space. Without any height setting the viewer is 400 pixels tall. |
| Height | Fill the available column space, or match the viewport height and optionally subtract the header above. Either one takes priority over the aspect ratio and the custom height. |
A panorama needs room to read. Give it more height than a flat image of the same subject would need.
Image
Border, Box Shadow and Box Decoration work as they do in the native Image element of YOOtheme Pro, applied to the viewer frame as a whole.
Accessibility
| Option | Description |
|---|---|
| ARIA Label | Names the viewer for assistive technology, for example Panorama of the main hall. Left empty, the Image Alt is used. |
General and Advanced
The General group and the Advanced tab are the standard YOOtheme Pro element settings, documented under Elements for WordPress and Joomla.
Styling
The element exposes these classes to Custom CSS, alongside .el-element:
.pe-360-viewer, .pe-360-viewer-image, .pe-360-viewer-placeholder, .pe-360-viewer-load-button, .pe-360-hotspot, .pe-360-hotspot-tooltip
.pe-360-viewer-placeholder and .pe-360-viewer-load-button exist only while Loading is switched off, and they are what you style to make the poster state match your design. .pe-360-hotspot is the marker in the scene, .pe-360-hotspot-tooltip the caption it opens.
Class names starting with pnlm- belong to the underlying panorama library. They are internal and may change when it is updated.
Accessibility and keyboard
The viewer is a labelled region that announces itself as a 360 degree image viewer, so a screen reader user knows what the interactive area is before entering it. Hotspots are buttons that report whether their caption is open. The focus outline appears for people navigating by keyboard and stays out of the way of mouse users.
| Key | Action |
|---|---|
| Arrow keys, or W A S D | Look around the panorama. |
| Plus / Minus | Zoom in and out. |
| Tab | Move focus through the viewer, the load button, the zoom and fullscreen controls and the hotspots. |
| Enter or Space | Load the viewer, press the focused control, or open a hotspot caption. |
| Escape | Close an open hotspot caption, or leave fullscreen. |
When the operating system asks for reduced motion, the element drops its own transitions on the load button, hotspots and captions. Panning stays under the visitor's control either way, because nothing moves on its own.
Notes and limits
- The element renders nothing without a panorama image. Everything else has a working default.
- Only equirectangular panoramas are supported. Cube maps and multi-resolution tile sets are not.
- Panorama files are large. Switching Loading off gives visitors a poster first and keeps the scene off the critical path of the page.
- The panorama library is bundled with the plugin under the MIT license. Nothing is fetched from a third-party CDN at runtime.
- Fullscreen is handed to the browser, so its exact behaviour follows the browser, not the element.