Pannellum Example1

Change class name on click in jQuery

by Straniero

HTML

<script src="https://cdn.pannellum.org/2.4/pannellum.js"></script>
<link rel="stylesheet" href="https://cdn.pannellum.org/2.4/pannellum.css">
<script src="https://pannellum.org/images/bma-1.jpg"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://s17.postimg.org/nza4h9ifj/poi4.png"></script>
<body>
    <div id="panorama"></div>
</body>

CSS

#panorama 
		{
			width: 800px;
			height: 400px;
		}
    
    	#controls {
        position: absolute;
        bottom: 0;
        z-index: 2;
        text-align: center;
        width: 100%;
        padding-bottom: 3px;
    }
    .ctrl {
        padding: 8px 5px;
        width: 30px;
        text-align: center;
        background: rgba(200, 200, 200, 0.8);
        display: inline-block;
        cursor: pointer;
    }
    .ctrl:hover {
        background: rgba(200, 200, 200, 1);
    }
	 .custom-hotspot {
        height: 50px;
        width: 50px;
        background-image: url("https://s17.postimg.org/nza4h9ifj/poi4.png");
	      background-size: 100% 100%;
		
    }
     div.custom-tooltip span {
        visibility: hidden;
        position: absolute;
        border-radius: 3px;
        background-color: #fff;
        color: #000;
        text-align: center;
        max-width: 200px;
        padding: 5px 10px;
        margin-left: -220px;
        cursor: default;
    }
		
    }
     div.custom-tooltip:hover span{
        visibility: visible;
    }
	
    div.custom-tooltip:hover span:after {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border-width: 10px;
        border-style: solid;
        border-color: #fff transparent transparent transparent;
        bottom: -20px;
        left: -10px;
        margin: 0 50%;
    }
	#overlay_image{
		position: relative;
   
    }
	.immagine {
		position:absolute;
		top:0;
		right:0;
		z-index: 1;
		height: 150px;
        width: 150px;
	}

JavaScript

var yaws = [];
var test = [];
var pitch = [];
var descr = [];
var eventDescr = [];
var eventId = [];
var eventIdLabel = [];
var descrConcat = [];
var urlPresent = [];
var url = [];
var loop;

getHotSpotsValues();
setTimeout(() => updateHTML("8", "visible"), 2000);

//Testing function
function paint360(pitch,yaws,eventId,eventDescr,urlPresent,url,descrConcat)
{
  
    viewer = pannellum.viewer('panorama', {
        "type": "equirectangular",
        //Photo url
        "panorama": "https://pannellum.org/images/bma-1.jpg",
        "showControls": false,
        "autoLoad": true,
        "compass": true,
        "northOffset": -10,
        //Bullseye to get yaw & pitch in debug mode
        //"hotSpotDebug": true,
       "hotSpots": [
        {
            "pitch": pitch[0],
            "yaw": yaws[0],
            "cssClass": "custom-hotspot",
            "createTooltipFunc": hotspot,
            "createTooltipArgs": descrConcat[0]
        },
        {
            "pitch": pitch[1],
            "yaw": yaws[1],
            "cssClass": "custom-hotspot",
            "createTooltipFunc": hotspot,
            "createTooltipArgs": descrConcat[1]
        },
        {
            "pitch": pitch[2],
            "yaw":yaws[2],
            "cssClass": "custom-hotspot",
            "createTooltipFunc": hotspot,
            "createTooltipArgs": descrConcat[2]
        }
    ]
    });
}

// Hot spot creation function
function hotspot(hotSpotDiv, args) {
    hotSpotDiv.classList.add('custom-tooltip');
    var span = document.createElement('span');
    var res = args.split("-");
    span.id = (res[1].trim());
    span.innerHTML = (res[0].trim());
    hotSpotDiv.appendChild(span);
    span.style.width = span.scrollWidth - 20 + 'px';
    span.style.marginLeft = -(span.scrollWidth - hotSpotDiv.offsetWidth) / 2 + 'px';
    span.style.marginTop = -span.scrollHeight - 12 + 'px';
}

function updateHTML(elmId, value) {
  var elem = document.getElementById(elmId);
  if (typeof elem !==...