Zeroqode Documentation
Search…
Plugins
Templates
360 Virtual Tour
Link to plugin page: https://zeroqode.com/plugin/360-virtual-tour-1639069546253x330843778300703400​
Introduction:
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.
How to setup
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.
​
Fields
Description
Type
DescriptionDescription or label on the navigation bar.
text
Navabar ZoomAdd zoom control buttons to the navigation bar.
yes/no
Navabar DownloadAdd a download button to the navigation bar.
yes/no
Navabar AutorotateAdd a button to switch autorotate
yes/no
Navabar FullscreenAdd fullscreen control button
yes/no
Navabar CaptionDisplay
Description in navigation baryes/no
Navabar gyroscopeAdd a button to switch gyroscope usage
yes/no
Move by inertiaAdd a button move by inertia in the navigation panel
yes/no
MinZoomMinimum zoom of the image.
number
MaxZoomMaximum zoom of the image.
number
Autorotate speedThis field is responsible for autorotate speed in the virtual tour
number
Loading imagePreloading image link
text
Data sourceData source with images.
list of images
Marker typeData type from the base. Represent markers.
App Type
Marker IDField of the
Marker type representing idfield of
marker type.Evaluate to Text
IconField of the
Marker type representing marker icon.field of
marker type.Evaluate to Image
LatField of the
Marker type representing marker latitude.field of
marker type .Evaluate to Number
LongField of the
Marker type representing marker longitude.field of
marker type.Evaluate to Number
List of markerList of
Marker type. list of
marker typeMarker TooltipField of the
Marker typerepresenting marker tooltip.
When the marker is hovered tooltip will be displayed.field of
marker typePlugin States
State
Description
Type
Marker ID
Representing marker id from Database
text
On Click Latitude
Representing click position.
number
On Click Longitude
Representing click position.
number
Plugin Actions.
1. Create an Embedded Panorama
This action allows creating a Virtual Tour.
​
Fields
Description
Type
IDID of the group where the Virtual Tour will be drawn
text
DescriptionDescription or label on the navigation bar.
text
Navabar ZoomAdd zoom control buttons to the navigation bar.
yes/no
Navabar DownloadAdd a download button to the navigation bar.
yes/no
Navabar AutorotateAdd a button to switch autorotate
yes/no
Navabar FullscreenAdd fullscreen control button
yes/no
Navabar CaptionDisplay
Description in navigation baryes/no
Navabar gyroscopeAdd a button to switch gyroscope usage
yes/no
Move by inertiaAdd a button move by inertia in navigation panel)
yes/no
MinZoomMinimum zoom of the image.
number
MaxZoomMaximum zoom of the image.
number
Autorotate speedThis field is responsible for autorotate speed in the virtual tour
number
Loading imagePreloading image link
text
Data sourceData source with images.
list of images
Marker typeData type from the base. Represent markers.
App Type
Marker IDField of the
Marker type representing idfield of
marker type.Evaluate to Text
IconField of the
Marker type representing marker icon.field of
marker type.Evaluate to Image
LatField of the
Marker type representing marker latitude.field of
marker type .Evaluate to Number
LongField of the
Marker type representing marker longitude.field of
marker type.Evaluate to Number
List of markerList of
Marker type. list of
marker typeMarker TooltipField of the
Marker type representing marker tooltip.
When the marker is hovered tooltip will be displayed.field of
marker type2. Destroy Tour
This action destroys the virtual tour.
Choose an element from the dropdown which needs to be destroyed.
​
3. Transition
This action allows markers navigation.
​
Field
Description
Img Virtual tourThis image will be used as a panorama
Marker TypeApp type from the base. This type will be used as a type of markers.
Marker SourceList of
Marker Type. List of markersMarker IDField of
Marker Type representing marker idIconField of
Marker Type representing marker iconLatField of
Marker Type representing marker latitudeLongField of
Marker Type representing marker longitudeMarker TooltipField of
Marker Typerepresenting marker tooltip​
Data source example for the Dynamic image field.
​
Marker Source example.
Plugin Events.
- Loaded - triggers when '360 virtual Tours' is loaded.
- Object ready - triggers when the object (for instance group with panorama) is ready.
- Marker is clicked on element - triggers when the marker is clicked on the '360 Virtual Tours' plugin element.
- Marker is clicked on embedded - triggers when the marker is clicked on '360 Virtual Tours' that are created by plugin action.
- Doubleclick - triggers when '360 virtual Tours' is double-clicked.
Database structure.
Location data table.
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.
- 1.name - Location name.
- 2.image - Location image.
- 3.markers - List of markers with
unique ID.
Markers data table.
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.
- 1.id - marker id.
- 2.img - marker image.
- 3.lat - marker latitude.
- 4.long - marker longitude.
- 5.location - where the marker will be displayed.
- 6.Title-tooltip - tooltip when hovering over a marker.
​
Workflow example.
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.
​
Workflow Create Marker:
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.
Workflow Transition:
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.
​
​
Demo to preview the settings
Plugins - Previous
Google Sheets With Charts Plugin for Bubble
Next - Plugins
ConvertKit Plugin for Mailing
Last modified 1mo ago