Hotspot JavaScript Action How To

[travancic]

OK, I am trying to call a JavaScript function (using jQuery) when user clicks on a hotspot.

Each hotspot click will show a DIV (either modal window or a div that slides into view) with bunch of info about particular hotspot.

I cannot seem to find any tutorials about this. Could not find any demos on demo page about this either.

I am wondering it this is even possible?

 

[travancic]

And... this is how my code looks like. Trying to somehow trigger the showDetails() functions but nothing happens.

XML:

  <hotspots>
    <hotspot id="hotspotred" renderMode="0" indicatorImage="circ-cross-large-red.svg" activateOnClick="true">
      <spotinfo clickAction="11" clickData="showDetails();" />
    </hotspot>
    <hotspot id="hotspotblue" renderMode="0" indicatorImage="circ-cross-large-blue.svg" activateOnClick="true">
      <spotinfo txt="test" css="color:#333333;width:200px;padding:15px 15px;border:1px solid #EEEEEE;background-color:rgba(255,255,255,1);" clickData="showDetails();" />
    </hotspot>
    <hotspot id="hotspotgreen" renderMode="0" indicatorImage="circ-cross-large-green.svg">
      <spotinfo clickData="showDetails();"  />
    </hotspot>
    <hotspot id="hotspotyellow" renderMode="0" indicatorImage="circ-cross-large-orange.svg">
      <spotinfo />
    </hotspot>
  </hotspots>

HTML

<script language="javascript" type="text/javascript">
    
    function showDetails(){
        console.log("Show Details Function Triggered.");
    };

    jQuery(document).ready(function(){

        jQuery('#wr360PlayerId').rotator({
            licenseFileURL: 'license.lic',
            configFileURL: '360_assets/HouseHotspotJavaScript/index.xml',
            graphicsPath: 'imagerotator/html/img/basic',
            alt: 'JavaScript Action Test',
            responsiveBaseWidth: 1920,
            responsiveMinHeight: 0,
            googleEventTracking: false,
        });        

    });    

</script>

 

[travancic]

To answer my own question In case someone needs it.

This is the correct way to specify the function in the XML file. clickData should only contain function name, no parentheses or semicolon.

All works now.

  <hotspots>
    <hotspot id="hotspotred" renderMode="0" indicatorImage="hotspot-icon-dupont.png" activateOnClick="true" effects="scaleUp">
      <spotinfo clickAction="11" clickData="showDetails" />
    </hotspot>
    <hotspot id="hotspotblue" renderMode="0" indicatorImage="hotspot-icon-dupont.png" activateOnClick="true" effects="scaleUp">
      <spotinfo clickAction="11" clickData="showDetails" />
    </hotspot>
    <hotspot id="hotspotgreen" renderMode="0" indicatorImage="hotspot-icon-dupont.png" activateOnClick="true" effects="scaleUp">
      <spotinfo clickAction="11" clickData="showDetails" />
    </hotspot>
    <hotspot id="hotspotyellow" renderMode="0" indicatorImage="hotspot-icon-dupont.png" activateOnClick="true" effects="scaleUp">
      <spotinfo clickAction="11" clickData="showDetails" />
    </hotspot>
  </hotspots>

And then you can add whatever you need to your function.

<script language="javascript" type="text/javascript">
   
    function showDetails(){
        console.log("Show Details Function Works!");
    };

    jQuery(document).ready(function(){

        jQuery('#wr360PlayerId').rotator({
            licenseFileURL: 'license.lic',
            configFileURL: '360_assets/HouseHotspotJavaScript/index.xml',
            graphicsPath: 'imagerotator/html/img/basic',
            alt: 'JavaScript Action Test',
            responsiveBaseWidth: 1920,
            responsiveMinHeight: 0,
            googleEventTracking: false,
        });       

    });   

</script>

 

[WebSupport]

Hi there and thanks for the update!

There's another way to do it and it's via hotspot APIs which are more advanced and have various other options. You can see them in action if you download this archive and see the api template in the root:

https://webrotate360.s3.amazonaws.com/sites/webrotate360/downloads/Resources/IntegrationTemplates.zip

 

[travancic]

Hi there and thanks for the update!

There's another way to do it and it's via hotspot APIs which are more advanced and have various other options. You can see them in action if you download this archive and see the api template in the root:

https://webrotate360.s3.amazonaws.com/sites/webrotate360/downloads/Resources/IntegrationTemplates.zip

Thanks for a quick reply!

I did take a look at that earlier but I was stuck at how to reference the function I need in the XML. I think I am getting a better idea how everything works.

I did get it to work but I will take a deeper dive to see if I can optimize the process a bit.