Listening to RotateTool Events

The 3DRT 360° product viewer dispatches these events (version 1.2.9 and above). Scroll down to see how to subscribe for events.

  • RotateTool.ON_IMAGE (‘3drt_on_image)
  • RotateTool.ROTATION_START (‘3drt_rotation_start’)
  • RotateTool.ROTATION_STOP (‘3drt_rotation_stop’)
  • RotateTool.ZOOM_START (‘3drt_zoom_start’)
  • RotateTool.ZOOM_STOP (‘3drt_zoom_stop’)
  • RotateTool.ZOOM_CHANGE (‘3drt_zoom_change’)
  • RotateTool.ZOOM_RESET (‘3drt_zoom_reset’)
  • RotateTool.PAN_START (‘3drt_pan_start’)
  • RotateTool.PAN_STOP (‘3drt_pan_stop’)
  • RotateTool.TURN_START (‘3drt_turning_start’)
  • RotateTool.TURN_STOP (‘3drt_turning_stop’)
  • RotateTool.HOTSPOT_HOVER (‘3drt_hotspot_hover’)
  • RotateTool.HOTSPOT_OPEN(‘3drt_hotspot_open’)
  • RotateTool.TOOLTIP_SHOW(‘3drt_tooltip_show’)
  • RotateTool.PRELOADER_LOADED (‘3drt_preloader_image_loaded’)
  • RotateTool.PRELOADER_PROGRESS (‘3drt_preloader_progress’)
  • RotateTool.IMAGES_LOADED (‘3drt_images_loaded’)
  • RotateTool.TOGGLE_ROTATE_MODE (‘3drt_toggle_rotate_mode’)
  • RotateTool.TOGGLE_PAN_MODE (‘3drt_toggle_pan_mode’)
  • RotateTool.MOUSEWHEEL_ZOOM (‘3drt_mousewheel_zoom’)
  • RotateTool.CLICK_OBJECT (‘3drt_click_object’)
  • RotateTool.BUTTON_PLAY_PAUSE_CLICK (‘3drt_button_play_pause_click’)
  • RotateTool.BUTTON_ARROW_LEFT_CLICK (‘3drt_button_arrow_left_click’)
  • RotateTool.BUTTON_ARROW_RIGHT_CLICK (‘3drt_button_arrow_right_click’)
  • RotateTool.BUTTON_FULLSCREEN_CLICK (‘3drt_button_fullscreen_click’)
  • RotateTool.BUTTON_ZOOMSLIDER_CLICK (‘3drt_button_zoomslider_click’)
  • RotateTool.BUTTON_ROTATE_CLICK (‘3drt_button_toggle_rotate_click’)
  • RotateTool.BUTTON_PAN_CLICK (‘3drt_button_toggle_pan_click’)



RotateTool.ON_IMAGE
This event is dispatched each time a new image is shown. Useful e.g. when you need update info on your webpage when a certain position of the product view is reached.

The event.detail object contains these properties:

imgH : Is the horizontal level id of the Image. If you have one level of rotation and 64 images, the imgH goes [0..63].
imgV : Is the vertical level id. Always 0 for single level rotations.



RotateTool.HOTSPOT_HOVER
This event is dispatched when the mouse pointer hovers a hotspot. The event.detail object contains the “hotspotData” properties as they are defined in config.js, e.g.



RotateTool.HOTSPOT_OPEN
This event is dispatched when the hotspot is clicked on, or touched on a touch device. The event details object contains two objects: hotspotData and hotspotElement. The hotspotData object contains the hotspot data (see HOTSPOT_HOVER for example) and the hotspotElement is the DOM object of the actual hotspot.



RotateTool.TOOLTIP_SHOW
This event is dispatched when the tooltip of the hotspot is shown. The tooltip shows on mouse hover and hides on mouse out. The event details object contains two objects: hotspotData and tooltipElement. The hotspotData object contains the hotspot data (see HOTSPOT_HOVER for example) and the tooltipElement is the DOM object of the tooltip shown.

 

How to subscribe to Events

Once a rotateTool Instance is initialized, the RotateTool tries to call the global function yofla_rotateToolInstanceInitialized with the targetId parameter (the targetId parameter identifies the product rotation and is the same as the “div id”).
Using the targetId parameter you attach your desired event listener (in our case rotateToolOnImageListener) to your product rotation.

JavaScript Code:

Html Code:

Important Note:
If you embed a rotation using an Iframe, the JavaScript functions need to be within the iframe.html page. You can always embed the rotation directly, without using the iframe – what is the prefered if you want the product rotation to interact with your webpage.