hotspot Customization

[Oakvald]

Hi,

I'm new on website design and stuff
How can i do rotate my hotspot like in your JVC camera presentation? (www.webrotate360.com)
and when we click on it, it seem to become another fix hotspot?


Can i do this without another software?

If someone can explain me quickly the mains steps, I thank him.

(sorry for my bad english)

 

[WebSupport]

Hi there!

Here's a quick example of a similar 360 product view with the interactive hotspots (just click or tap on the first hotspot indicator):

http://www.webrotate360.com/Downloads/D ... -demo.html

We created it like this:

1. Two hotspots (named spot1 and spot2) were created in SpotEditor and set to Activate and Deactivate on Click on the Hotspot form on the first tab.

2. Two image labels were created under the Images->Rows tab by double-clicking on two selected image thumbnails and giving the labels a quick name (label1 and label2).

3. We then used the webrotate API that you can see in the html source of the demo link above or by downloading the entire SpotEditor project for the same here (the demo html with the API example is under the published folder).

PS: you would need the latest version of the software v3.6 (RC) to create a similar product presentation that you can download on this page:

http://www.webrotate360.com/products/we ... er.aspx#rc

Let us know if any questions

 

[Oakvald]

Thank you for this example. I have succeeded to make the system "label". But my "spot 2" does not automatically open as your example. How should I do it?

 

[WebSupport]

Hi, you would need to use the small API script that you will see inside the .html example in the zip file under published. But please let us know if you need help with this!

 

[Oakvald]

Indeed, I think I'm going to need help.

In the html document I see what seems to be the API.

<script language="javascript" type="text/javascript">

jQuery(document).ready(function(){

    jQuery('#wr360PlayerId').rotator({
        licenseFileURL: '',
		configFileURL: '360_assets/api-spot-click/api-spot-click.xml',
		graphicsPath: 'imagerotator/html/img/basic',
        apiReadyCallback: function(api, isFullScreen){
		
			api.hotspots.onAction(function(hotspotConfig){
                
				var speed = 3; // time in seconds for a full 360 spin.
				
                if (hotspotConfig.id == 'spot1') {
					api.images.playToLabel('label2', speed, function() {
						api.hotspots.activate('spot2');
					});
				}
				else if (hotspotConfig.id == 'spot2') {
					api.images.playToLabel('label1', speed, function() {
						api.hotspots.activate('spot1');
					});
				}
				
                return false; 
            });
        },
    });

});

</script>

How does it work?
If I want to make changes, do I have written directly into this document?

 

[WebSupport]

You may not need to change anything (in the test html file we included under the published folder in the attached zip file), as long as you have two hotspots named spot1 and spot2, and also two image labels named label1 and label2.

What happens next is that when you click on either spot1 or spot2, the following is triggered:

api.hotspots.onAction(function(hotspotConfig){
.....
}

If the click occurred on spot1, it says "play to label2" and activate spot2 at the end. And vica versa.

I hope it helps!