🚀 [NEW PLUGIN] Panorama viewer - 360 Virtual Tour

Showcase
1

[NEW PLUGIN] Panorama viewer - 360 Virtual Tour

Hello fellow Bubblers!
We have recently published a new plugin and would like to share this news with you:

logo
logo256×256 31.4 KB

Panorama viewer - 360 Virtual Tour - 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 information and navigation markers (HotSpots), 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

pano-min

.

pano-min

Installation:

  1. Add a plugin to your application.
  2. Place a “viewer” element on the page. Give it the required dimensions. If necessary, change the default parameters.
  3. In workflows, using the desired event (for example, “Page is loaded”, “An element is clicked” or another) connect the “addScene” action for each scene (image) in the virtual tour.
  4. Include the required fields: Scene ID I and Panorama URL. Next, configure scenes as needed and, if necessary, install and configure hotPoints.
    You can find more detailed information and examples on our demo page and on the page with the manual.

Demo:
For details and demos please visit the plugin page at

Demo app editor:

Manual:

Plagin page:

Plugin details:

Need help adjusting your new application?
Contact Jay at contact@mindforapps.com

Support
If you have questions, reach out to us at support@mindforapps.com

We appreciate your reviews and suggestions.

Cheers
Jay | Mindforapps

1 Like
2

Hello, congratulations on your plugin, it’s amazing. I would like to know, for example, if I can create different clickable areas, simply by “continuing with the tour”, for example, I click on the ground and it opens a popup or something that brings me information or options for that element or changes it.

I would like to combine both of your plugins, I would like to use something similar to the plugin within the tour

3

Hello!
Thank you for the kind words about our work. It really motivates us to continue creating new and improving old plugins.

As for your question, unfortunately there is no way to create areas.

You can only create information hotspots. Depending on how you configure them, the following actions will be available:

  • hovering over an information hotspot will display a tooltip with predefined information.
  • clicking on an information hotspot will open (in a new window) a predefined link.

And, unfortunately, it is not possible to directly merge these two plugins. They work with completely different data.

Sorry, but unfortunately it depends on the design of these plugins.