How can I load(switch) scene in sync screen with javascript menu?
I'd like to load(switch) scene in sync screen by bootstrap menu
but it doesn't work
HTML
<!DOCTYPE html><html><head> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="x-ua-compatible" content="IE=edge" /> <!-- jQuery --><script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="crossorigin="anonymous"></script>
<!-- Bootstrap files (jQuery first, then Popper.js, then Bootstrap JS) --><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" type="text/css"/><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" type="text/javascript"></script>
<style type="text/css">/* ============ desktop view ============ */@media all and (min-width: 992px) { .navbar .nav-item .dropdown-menu{ display: none; } .navbar .nav-item:hover .nav-link{ color: #fff; } .navbar .nav-item:hover .dropdown-menu{ display: block; } .navbar .nav-item .dropdown-menu{ margin-top:0; }} /* ============ desktop view .end// ============ */
</style> <style> html { height:100%; } body { height:100%; overflow:hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; } .d1 {float:left;width:50%;height:100%;border-right:1px solid #b8b8b8;margin-right:-1px;}
.d2 {float:left;width:49.6%;height:100%;}
.d3 {float:left;width:0.4%;height:100%;background-color:#888888;}
#hr {cursor:pointer;}
</style>
</head><body onload="init()">
<script src="tour.js"></script> <script type="text/javascript">
var startpos, diffpos=0, range=50;
var isEnable = false;
var krpano = document.getElementById("krpanoLeftDiv");var krpano2 = document.getElementById("krpanoRightDiv");
function on_mouse_down(e) {
startpos = event.clientX + diffpos;
isEnable = true;
return false;
}
function on_mouse_up(e) {
isEnable = false;
return false;
}
function on_mouse_move(e) {
if (isEnable) {
pos = event.clientX;
diffpos = startpos-pos;
var width = window.innerWidth/2;
if (diffpos > -(width-range) && diffpos < (width-range)) {
document.getElementById("krpanoLeftDiv").style.width = width - diffpos + "px";
document.getElementById("krpanoRightDiv").style.width = width - 20 + diffpos + "px";
}
}
}
function changepano(panoName){krpano.call("loadscene(" + panoName + ");");krpano2.call("loadscene(" + panoName + ");");}
function init() {
document.getElementById("hr").onmousedown = on_mouse_down;
document.onmouseup = on_mouse_up;
document.onmousemove = on_mouse_move;
}
</script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="position: relative; z-index: 2;"> <a class="navbar-brand" href="#">APT</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main_nav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="main_nav" style="position: relative; z-index: 2;">
<ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="#">Before</a> </li> <li class="nav-item"> <a class="nav-link" href="#=">After</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown"> Split View</a> <ul class="dropdown-menu dropdown-menu-right"> <li><a class="dropdown-item" href="javascript:changepano(scene_101);"> Living room </a></li> <li><a class="dropdown-item" href="javascript:changepano(scene_102);"> Kitchen </a></li> <li><a class="dropdown-item" href="javascript:void(0);" onclick='changepano(scene_103);");'> bedroom 1 </a></li> <li><a class="dropdown-item" href="javascript:changepano(scene_104);"> bedroom 2 </a></li> <li><a class="dropdown-item" href="#"> bedroom 3 </a></li> <li><a class="dropdown-item" href="#"> 06 </a></li> <li><a class="dropdown-item" href="#"> 07 </a></li> <li><a class="dropdown-item" href="#"> 08</a></li> <li><a class="dropdown-item" href="#"> 09 </a></li> </ul> </li> </ul> </div> <!-- navbar-collapse.// --></nav>
<div id="viewersDiv" style="position:absolute; left:0; top:0; width:100%; height:100%; z-index: 1;"> <div class="d1" id="krpanoLeftDiv" > </div> <div class="d3" id="hr"></div> <div class="d2" id="krpanoRightDiv" ></div> </div> <script> embedpano({html5:"only", basepath:"", id:"krpanoLeftViewer", target:"krpanoLeftDiv", xml:"tour_l1.xml", vars:{syncside:"left",syncviewer:"krpanoRightViewer"}, passQueryParameters:true}); embedpano({html5:"only", basepath:"", id:"krpanoRightViewer", target:"krpanoRightDiv", xml:"tour_r1.xml", vars:{syncside:"right",syncviewer:"krpanoLeftViewer"}, passQueryParameters:true}); </script>
</body></html>This is javascript part
Code
var krpano = document.getElementById("krpanoLeftDiv");var krpano2 = document.getElementById("krpanoRightDiv");
function changepano(panoName){krpano.call("loadscene(" + panoName + ");");krpano2.call("loadscene(" + panoName + ");");}This is javascrtip call
Code
<li><a class="dropdown-item" href="javascript:changepano(scene_102);"> Kitchen </a></li>
HOw can I fix it?
this is sample link
http://vr2.dreamvrad.net/kc_centralpark…ndex_split.html
