Virtual Tour

Plugin details

Overview & Key Features

This no-code plugin allows you to bring virtual tours and panoramic photos into your Bubble app. You can easily create interactive virtual tours, maps, and presentations. The plugin also supports markers, which can provide information about specific areas within a scene or provide navigation to other rooms or areas.

Panoramic images can be provided in either equirectangular or cube map formats. Equirectangular is the simplest to use as only a single image is needed. However, to ensure support among all WebGL-capable devices, the maximum image size should be preferably limited to 4096px wide; 8192px is also acceptable for most devices. Cube maps require six images but support somewhat higher resolution panoramas, as the vast majority of devices support cube faces up to 4096px across. Although larger images are supported, download sizes should be taken into consideration. This format is a cube map-based format, except each cube face is a tiled image pyramid instead of a single image.

Since it is not obvious from the examples, it is prudent to note that the hotSpotDebug parameter exists to aid in the placing of hot spots. It can be enabled while setting up the hot spots, but it should always be disabled in production.

pannellum.js was used in the process of creating the plugin.

Features:
- Equirectangular, cubic panoramas
- Autoload and autorotate the image for seamless experience.
- Configure autorotation speed to control the image rotation.
- WebGL and CSS 3D based renderers
- Interactive controls with zoom and fullscreen options.
- Hot spots / tours
- Compass headings
- API
- Just 21kB gzipped
- Browser Compatibility
- Plugin is built with recent web standards, it requires a modern browser to function.

Full support (with appropriate graphics drivers):
- Firefox 23+
- Chrome 24+
- Safari 8+
- Internet Explorer 11+
- Edge


Demo:
For details and demos please visit the plugin page at
https://virtual-tour-52895.bubbleapps.io/version-test/virtual-tour

Demo app editor:
https://bubble.io/page?id=virtual-tour-52895&test_plugin=1737661679083x522969597219438600_current&name=virtual-tour&tab=Design&type=page

Manual:
https://virtual-tour-52895.bubbleapps.io/version-test/virtual-tour-manual

Plugin page:
https://mindforapps.com/plugin_details/virtual-tour