Link to plugin page: https://zeroqode.com/plugin/360-virtual-tour-1639069546253x330843778300703400
Virtual tour is a simulation of the real world through viewers’ digital screen. With a 360 virtual tour, you can enjoy the environment of real places without actually being present there.Use this plugin to create interactive & virtual tours simply with a 360-degree panoramic photo. What’s more, you can utilize it to make intelligent and virtual visits, maps, introductions. The plugin supports markers for providing information about any part of the scene or for navigation to other rooms/areas. Just upload 360 panoramic images and this plugin will help you turn them into a nice realistic virtual tour.
The plugin comes with an element- 360 Virtual Tours. It is able to create a Virtual Tour using the plugin element as well as the plugin action. For instance, place a group on the page and trigger the plugin action to enable the 360 Virtual Tours.
Place the element on the page.
Fill in the element fields.
This action allows creating a Virtual Tour.
ID - ID of the group where the Virtual Tour will be drawn. (text)
Description - Description or label on the navigation bar. (text)
Navabar Zoom - Add zoom control buttons to the navigation bar. (yes/no)
Navabar Download - Add a download button to the navigation bar. (yes/no)
Navabar Autorotate - Add a button to switch autorotate. (yes/no)
Navabar Fullscreen - Add fullscreen control button. (yes/no)
Navabar Caption - Display Description in navigation bar. (yes/no)
Navabar gyroscope - Add a button to switch gyroscope usage. (yes/no)
Move by inertia - Add a button move by inertia in navigation panel. (yes/no)
MinZoom - Minimum zoom of the image. (number)
MaxZoom - Maximum zoom of the image. (number)
Autorotate speed - This field is responsible for autorotate speed in the virtual tour. (number)
Loading image - Preloading image link. (text)
Data source - Data source with images. (list of images)
Marker type - Data type from the base. Represent markers. (App Type)
Marker ID - Field of the Marker type representing id. (field of marker type - Evaluate to Text)
Icon - Field of the Marker type representing marker icon. (field of marker type - Evaluate to Image)
Lat - Field of the Marker type representing marker latitude. (field of marker type - Evaluate to Number)
Long - Field of the Marker type representing marker longitude. (field of marker type - Evaluate to Number)
List of marker - List of Marker type. (list of marker type)
Marker Tooltip - Field of the Marker type representing marker tooltip. When the marker is hovered tooltip will be displayed. (field of marker type)
This action destroys the virtual tour.
Choose an element from the dropdown which needs to be destroyed.
This action allows markers navigation.
This data table is should be created first. Save the location name and location image in it. Further, it will be needed for saving markers by unique ID for a specific location.
This table is used for marker creation. When the marker is being created the data will be stores in this table. By marker unique ID the needed location will be found.
Here is represented an example of creating a marker through the Popup. Create a Popup with 4 inputs, 1 dropdown list, 1 image uploader, 1 button "create".
Marker ID - it's a value that will be saved as 'id' in the Markers Data table.
Tooltip - marker tooltip that will be saved in the Markers Data table.
Latitude - A360VirtualTours's click Latitude
Longitude- A360VirtualTours's click Longitude
Dropdown Location- Location options from Location Data table
Image uploader - preferable to upload PNG format.
Button - triggers the Create Marker action.
Select an event A 360 Virtual Tour Douoblclick and trigger 'show Create Marker popup' action.
After filling all the inputs and fields in the popup, hit the 'Create' button and trigger the 'Create a new markers' action.
The next step will be an action - Make changes to a list of things (Location) that will connect the marker with the location.
Select the event- A 360 Virtual Tours Marker is clicked
Add a pause before the next action minimum is 300 ms.
The second step is an action 'Transition 360VirtualTours' that allows switching to another Panorama.
Bubble Editor: https://bubble.io/page?version=live&name=360_virtual_tour&id=zeroqode-demo-23&tab=tabs-1