Articles in this section

API - Events

This section contains the available events within the 360 HD Viewer.

"instance:alt:thumbs:clicked"
  • This event is triggered when an alternate image is clicked.
  • The callback should take a string parameter and an object parameter.
  • The object contains a property named “index” with the index of the alternate image that was clicked, and another property named "contentType" with 2 possible values - 1 means image, 2 means video.
  • This index corresponds to the index supplied in the alternateContent property to the viewer.
"instance:ar:button:error"
  • This event is triggered when AR button could not be loaded. It will also be triggered when AR view was activated but AR view is not available because the device does not have the required software installed.
"instance:ar:button:ready"
  • This event is triggered when AR button is ready. The callback should take a string parameter with the path to the USDZ file.
"instance:ar:action:btn:tapped"
  • This event is triggered when the button of the AR banner is tapped on iOS devices.
"instance:destroyed"
  • This event is triggered when the 360 HD Viewer instance is destroyed.
"instance:error"
  • This event is triggered when there has been a critical error in the initialization of the 360 HD Viewer instance.
  • The callback should take a string parameter and an object parameter. The object parameter will contain the initialization options.
"instance:features:canceled"
  • This event is triggered when a set of features has been canceled before it was displayed.
  • The callback should take a string parameter and an object parameter. The object contains the array of features that has been canceled.
"instance:features:error"
  • This event is triggered when a set of features has retrieved an error.
  • The callback should take a string parameter and an object parameter. The object contains the array of features that has failed.
"instance:firstframe:ready"
  • This event is triggered when the first frame is being shown in the 360 HD Viewer.
  • The callback should take an string parameter and an object parameter. The object parameter contains a property named "index" which indicates the index of the first frame, and another property called "totalFrames" indicating the total number of 360 frames.
  • When the viewer is used purely with static content, the index of the first frame would be 1, and the total number of frames would be 0 since there is no 360 content.
"instance:fullscreen:enter"
  • This event is triggered when the 360 HD Viewer enters fullscreen mode.
"instance:fullscreen:exit"
  • This event is triggered when the 360 HD Viewer exits fullscreen mode.
"instance:styleshot:img:loaded"
  • This event is triggered when a style shot image is loaded.
  • The callback should take an string parameter and an object parameter. The object contains the index of the style shot image and its code.
"instance:styleshot:thumbs:clicked"
  • This event is triggered when the user ends the rotation of the product in the 360 HD Viewer.
  • The callback should take an string parameter and an object parameter. The object contains the index of the style shot image and its code.
"instance:threesixty:end"
  • This event is triggered when the user ends the rotation of the product in the 360 HD Viewer.
  • Due note that this is bound to click/touch input and if a user is merely idling while spinning then it will not send a new SPIN_END event until the mouse or the finger is released.
  • The callback should take an string parameter and an object parameter. The object contains the index of the frame where the spin ends.
"instance:threesixty:start"
  • This event is triggered when the user begins to rotate the product in the 360 HD Viewer.
  • Due note that this is bound to click/touch input and if a user is merely idling while spinning then it will not send a new SPIN_BEGIN event if the user continues a spin after a while.
  • The callback should take an string parameter and an object parameter. The object contains the index of the frame where the spin starts.
"instance:viewer:complete"
  • This event is triggered when all 360 content or the selected frames for carousel and stacked viewer has been downloaded.
"instance:viewer:ready"
  • For 360 viewer, this event is triggered when it is possible to rotate the content of the 360 HD Viewer. For stacked and carousel viewer this event is triggered when the first image is loaded.
"instance:viewer:thumbs:clicked"
  • This event is triggered when a 360 thumbnail is clicked.
  • The callback should take an string parameter and an object parameter. The object contains the index of the 360 thumb that was clicked.
"instance:thumbs:ready"
  • This event is triggered when the thumb images has been downloaded and is ready to accept click events.
"instance:zoom"
  • This event is triggered when zoom panel is moved by drag or move events.
  • The callback should take a string parameter and an object parameter.
  • The object contains the index and the current center of the viewport in fractions, of the zoomed image. In case zoom has been executed on frame images or style shots, the object will also contain the files that has been downloaded since the last zoom event.
"instance:zoom:enter"
  • This event is triggered when the 360 HD Viewer enters it’s zoom state.
  • The callback should take an string parameter and an object parameter. The object contains 2 properties.
  • One of the properties is named "clickType" to indicate the sort of event that triggered the zoom. The possible values are 1 - single click (desktop), 2 - double click (touch devices), 3 - zoom button (phones and tablets).
  • The other parameter is named "mousePosition" and it is an object containing the coordinates where the click/tap happened ("currentX" and "currentY").The object also contains the current center of the viewport in fractions of the zoomed image.
"instance:zoom:exit"
  • This event is triggered when the 360 HD Viewer exits it’s zoom state.