Zeroqode Documentation
Search…
Plugins
Templates
360 Degree Viewer and Panorama Plugin
Link to plugin page: https://zeroqode.com/plugin/360-degree-viewer-and-panorama-1605685612509x716716693756312700​
Introduction
360°Viewer Plugin is designed to display an object or panorama in 360 degrees, the very best way to make the most of all your 360 photos and images.
You can load into the database, a group of images of an object from different sides, to display it in 360 degrees, also upload panorama objects to view them beautifully. The object can be scrolled in different directions using "drag and drop" or you can use built-in actions to auto-scroll the object.
The plugin processes a panoramic photo and displays a three-dimensional image. To display a volumetric object or panoramic photo, the corresponding built-in actions of the plug-in are used with the possibility of using additional parameters.
Note: Fullscreen mode for panoramic images is not compatible with iOS operating system
How to setup
- 1.Place the 360 degree view plugin element on page to get access to its events and actions
2. On button click event set an action to view the images in 360 using object viewer
3. Set the action proprieties for this event with data source provided from database
4. Add a couple actions to turn the object viewer clockwise or counterclockwise
5. Done
Plugin Element Proprieties
The plugin contains 360 degree viewer visual element which should be used on page.
Element Actions
- 1.Object viewer - action used to display an object in 360 degree through visual element.
Action fields:
- 1.Enable spin on page load
- 2.Enable spin after dragging (the rotation continues even after dragging)
- 3.Frame time (Time in ms between updates. e.g. 40 is exactly 25 FPS)
- 4.Mouse drag orientation (Preferred axis for user interaction (horizontal or vertical)
- 5.Data source (Image URL or array of urls to be used , preferably used from database)
2. Panorama viewer - action used to display panoramic views through visual element.
Action fields:
- 1.Description Description of the panoramic photo. You can use
<BBcode>,displayed at the bottom of the navigation bar - 2.Navbar ZoomCheckbox for Enable/Disable zoom buttons in navbar
- 3.Navbar downloadCheckbox for Enable/Disable download button in navbar
- 4.Navbar autorotateCheckbox for Enable/Disable auto-rotate button in navbar
- 5.Navbar fullscreenCheckbox for Enable/Disable fullscreen button in navbar
- 6.Navbar CaptionCheckbox for Enable/Disable caption (description) in navbar
- 7.Move by inertiaCheckbox for Enable/Disable inertia after dragging
- 8.MinFoVMinimal field of view (corresponds to max zoom), between 1 and 179
- 9.MaxFoVMaximal field of view (corresponds to min zoom), between 1 and 179
- 10.Autorotate speed(rpm)Speed of the automatic rotation (rpm - number of turns in one minute)
- 11.Loading imageSource path to an image displayed in the center of the loading circle
- 12.Data sourceSource path to the panorama image
3. Start turn object viewer - action for the 360 degree object., used to rotate only 1 frame. The properties indicate in which direction to rotate (right/left).
4. Start spin object viewer - action for the 360 degree object. Used to activate the object's auto-rotation.
5. Stop spin object viewer - action for the 360 degree object. Used to stop auto-rotate an object.
6. Destroy the object viewer - action for the 360 degree object. Used to stop displaying an object.
7. Destroy the panorama - action for the panorama object. Used to stop displaying panorama.
Element Events
The plugin has 2 events:
- 1.Panorama ready - used for actions after the panorama is loaded
- 2.Object ready - used for actions after the object is loaded
Workflow example
- 1.Place "360 degree view" visual element on page:
2. Add action "object viewer" or "panorama viewer" and select the desired element
3. Specify the required parameters and data source.
The object or panorama (depending on the selected action) appears in the item area:
Demo to preview the settings
Last modified 1yr ago