Rotate to specific point or image on button click in JS

Mavia Ali

New member
I have integrated web rotate 360 in my react app and it works perfect. Now, what I want is 360 image should auto rotate to any specific image when I click on button. Let me explain a complete scenario:

I have 4 buttons (Front, Right, Left, Rear). Now on click event of front button the front part of 360 image should be focused or auto rotate and same for other buttons as well.
Can you help me do that?
 

ForumAdmin

Administrator
Staff member
I'm glad React integration is going well! As for the requirement, it's pretty easy.

1. Create an image label. This is done under Images -> Rows tab in SpotEditor, where you can double-click on any of the images to create a named label. This will simply add a property to the published xml file (<image src="images/IMG_0015.jpg" label="xyz" />), so you can manually add them in xml if needed.

create-360-product-view-image-labels.png

2. In your viewer API integration in React, call this method as needed with the first parameter being the name of the label you entered in #1. Second parameter is either the playback speed or an object as described below. Third parameter is a callback you can pass to get notified once the label has been reached.

Code:
 api.images.playToLabel(
    // Label name as specified in SpotEditor under Images->List
    "play",
    /* Playback speed (period). Period represents the number of seconds it takes to make a full spin. Alternatively, instead of the period number, you can pass an object like this:
        {
            speed: 2 - number of seconds it takes to make a full spin,
            direction: 0 - short path = 0, long path = 1, clockwise = 2, counterclockwise = 3,
            keyHotspot: 'spot1' - optional hotspot name to activate and/or trigger or zoom to,
            activateHotspot: true/false - activate keyHotspot,
            hotspotTriggerDelay: 2000 - number of milliseconds after which to trigger keyHotspot action (if action is present and even if not activated),
            resetZoom: true/false - zoom out if zoomed before starting the playback,
            zoomOutSpeed: 400 - resetZoom speed in milliseconds,
            zoomToHotspot: true/false - zoom to keyHotspot,
            zoomInSpeed: 400 - zoom to hotspot speed in milliseconds,
            disableDrag: true/false - disable image dragging via mouse or touch while playToLabel is running
        }
    */
    1,
    // Optional callback which is called when label is reached.
    function(labelName){
        alert("Reached label: " + labelName);
    }
);
 
Last edited:

Mavia Ali

New member
I am using normal + sign image provided by an open editor for hotspots. But what I want is when someone clicks on any hotspot the image should change to any other image. Do you have any idea how we can do this?
 

ForumAdmin

Administrator
Staff member
Each such icon (hotspot indicator) has these CSS classes assigned:

hotspot_indicator hotspotname_indicator <-- where hotspotname is the name you gave the hotspot

When it's clicked, we assign two extra classes to the indicator elements:

indicator_active hotspotname_active

Generally, this should be sufficient to customize the active indicator presentation as needed.

PS: if your company hasn't purchased a webrotate license, please do for further support.
 
Top