Show hotspot image only on handheld

[LondonLight.org]

For polygon hotspots with "view mode: show current" (visible on mouse hover), I would like to show an additional animated hotspot image when the panorama is viewed on a hand-held device (because unlike a mouse cursor, fingers don't hover over the pano), and to hide it so just the polygon hotspot is visible on hover. How do I do that?

[Don]

Since touch devices lack hover or mouseover events, situations sometimes have me including an additional target hotspot in the middle of the polygon hotspot. I leave the polygon hotspots always-on, and exclude labels or special effects on the polygon hotspot. The target hotspot then includes the labels and special effects. And my control panel includes a button for the user to turn on/off the target hotspot. The situations vary.

If you choose to detect devices, javascript on the html page allows you to. And if you are outputting html5, then javascript in the skin.js allows manipulation of pano and skin elements. However, I avoid device detection, because it becomes a maintenance headache as new devices arrive yearly. Also avoid coding in the skin.js file unless you are really comfortable coding. Keep in mind: the skin.js is re-written every time the pano gets output again.

[LondonLight.org]

That sounds like a good idea, to use both types of hotspots and then to hide the point ones. I remember reading in the Pano2VR docs that you can use PHP for this too. I don't know yet which method is more reliable, more 'safe'. I re-use the same skin.js and pano2vr-player.js for every pano on the whole website to cut down on waiting times and overhead, unless a pano requires a unique skin via a boolean in the metadata

[Hopki]

Hi,
The PHP change skin trick for HTML5 would be better I think.
This should get you going.

Code: Select all

<?php if ((strpos($_SERVER['HTTP_USER_AGENT'],"iPhone")) || (strpos($_SERVER['HTTP_USER_AGENT'],"iPod")) || (strpos($_SERVER['HTTP_USER_AGENT'],"iPad")) || (strpos($_SERVER['HTTP_USER_AGENT'],"Android")) || (strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry")) || (strpos($_SERVER['HTTP_USER_AGENT'],"webOS"))) { ?>
<script type="text/javascript" src="skin_touch.js">
<?php } else { ?>
<script type="text/javascript" src="skin_mouse.js">
<?php } ?>
</script>

The KB document can be found here.
Regards,
Hopki

[LondonLight.org]

Thank you!