Javascript 将“查找全景”功能添加到Kolor Panotour
我用一个叫Kolor的程序制作了一个全景图。因此，我试图添加查找全景功能，该功能正在搜索全景图像，以便显示它们。 我发现了一个包含搜索功能的HTML文件，但似乎知道如何将其与原始HTML文件合并。 在帮助论坛上，它没有任何帮助。 以下是find pano文件：Javascript 将“查找全景”功能添加到Kolor Panotour,javascript,html,css,search,panoramas,Javascript,Html,Css,Search,Panoramas,我用一个叫Kolor的程序制作了一个全景图。因此，我试图添加查找全景功能，该功能正在搜索全景图像，以便显示它们。 我发现了一个包含搜索功能的HTML文件，但似乎知道如何将其与原始HTML文件合并。 在帮助论坛上，它没有任何帮助。 以下是find pano文件： <style type="text/css"> @-ms-viewport { width: device-width; } @media only screen and (mi
<style type="text/css">
@-ms-viewport { width: device-width; }
@media only screen and (min-device-width: 800px) { html { overflow: hidden; } }
* { padding: 0; margin: 0; }
html { height: 100%; }
body { height: 100%; overflow: hidden; }
div#container { height: 100%; min-height: 100%; width: 100%; margin: 0 auto; }
div#tourDIV {
height: 100%;
position: relative;
overflow: hidden;
}
{%include "htmlheadpanocss.tmpl" %}
div#searchDiv {
top: 0px;
left: -320px;
transition: left 0.3s;
position: fixed;
overflow: auto;
z-index: 4250;
background: #ffffff;
padding: 20px;
max-height: 100vh;
max-width: 310px;
box-shadow: 0px 0px 5px #555;
}
div#searchDiv.opened {
left: 0px;
}
div#toggleButton {
position: fixed;
display: table;
top: 20px;
left: 20px;
border-radius: 100px;
padding: 10px;
background: white;
transition: left 0.3s, box-shadow 0.5s;
z-index: 9999;
}
div#toggleButton p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
div#toggleButton img.inactive {
display: none;
}
div#toggleButton img {
/* icon size */
width: 20px;
height: auto;
}
div#toggleButton:hover {
cursor: pointer;
box-shadow: 2px 2px 30px 5px #222;
}
div#toggleButton.opened {
left: 320px;
background: white;
}
#resultList, #resultDiv {
padding-top: 20px;
}
#mainForm.hasScrolled {
position: fixed;
top: 0px;
left: 0px;
padding: 20px;
background-color: white;
max-width: 300px;
z-index: 99;
}
#mainForm #fixedResultsHeader {
display: none;
}
#mainForm.hasScrolled #fixedResultsHeader {
display: block;
padding-top: 20px;
}
.list-group-item {
border: none;
border-top:1px solid #eee;
padding: 10px 10px;
overflow: hidden;
text-overflow: ellipsis;
}
.list-group-item:first-child {
border-radius: 0px;
}
.list-item-thumb {
width: 100%;
}
/*fix box sizing*/
div.kolorBox,
ul.kolorMenu li.kolorMenuItem>p {
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-ms-box-sizing: content-box;
-o-box-sizing: content-box;
}
</style>
{%include "htmlheadscripts.tmpl" %}
</head>
<body>
<script type="text/javascript">
var panos = [
{% for group in project.panoGroups %}{% for pano in group.panos %}
{ id:"{{pano.tourId}}" , name:"{{pano.description.name}}", description:"{{pano.description.description|striphtmltags}}", thumb:"./{{dataDirectory}}/{{pano.thumbnailPath}}" },
{% endfor %}{% endfor %}
];
function resetsearch() {
document.getElementById('resultDiv').style.display = "none";
document.getElementById('texttosearch').innerHTML = "";
}
function finddesiredspot() {
if (texttosearch.value == "")
{
alert("Empty string");
return;
}
var found = false;
var foundpanos = [];
for (i = 0; i < panos.length; i++) {
if (kindofsearch.value == "name")
{
if (panos[i].name.toLowerCase().indexOf(texttosearch.value.toLowerCase()) > -1)
{
found = true;
foundpanos.push(panos[i]);
}
}
if (kindofsearch.value == "description")
{
if (panos[i].description.toLowerCase().indexOf(texttosearch.value.toLowerCase()) > -1)
{
found = true;
foundpanos.push(panos[i]);
}
}
}
if (found)
{
if (foundpanos.length == 1)
{
document.getElementById('resultDiv').style.display = "none";
var callstr = "mainloadscene(" + foundpanos[0].id + ")";
getTemplateTourPlayer().call(callstr);
callstr = "looktohotspot(" + foundpanos[0].id + ")";
getTemplateTourPlayer().call(callstr);
}
else
{
document.getElementById('resultDiv').style.display = "block";
var resultsStr = "<div class='list-group'>";
for (i = 0 ; i < foundpanos.length ; i++)
{
resultsStr += "<a href='#' class='list-group-item' onclick=\"getTemplateTourPlayer().call('mainloadscene(" + foundpanos[i].id + ")');\"><img class='list-item-thumb' src=\""+ foundpanos[i].thumb + "\"/><strong>" + foundpanos[i].name + "</strong>";
}
resultsStr += "</ul>";
document.getElementById('resultList').innerHTML = resultsStr;
}
}
else
{
document.getElementById('resultDiv').style.display = "block";
document.getElementById('resultList').innerHTML = "No Result found";
}
}
var templatetourplayer = null;
function getTemplateTourPlayer() {if ( templatetourplayer == null ) {templatetourplayer = document.getElementById('krpanoSWFObject');}return templatetourplayer;}
</script>
<div id="container">
{% comment %}<!-- tourDIV is used to display the VR viewer and all plugins which can be displayed in Fullscreen mode -->{% endcomment %}
<div id="tourDIV">
{%include "htmlpanodiv.tmpl" %}
{%include "pluginshtmltemplates.tmpl" %}
{%include "htmlembedpanoscript.tmpl" %}
<div id="toggleButton">
<p>
<img src="img/ic_search_48px.svg" alt="toggle button">
<img src="img/ic_close_48px.svg" alt="toggle button" class="inactive">
</p>
</div>
<div id="searchDiv">
<div id="mainForm">
<div class="input-group">
<input type="text" id="texttosearch" class="form-control" placeholder="Text to search">
<span class="input-group-btn">
<button id="searchbutton" type="button" onclick="finddesiredspot()" class="btn btn-primary">Search</button>
</span>
</div>
<br>
<label>Search field</label>
<select id="kindofsearch" class="form-control">
<option value="name">Name</option>
<option value="description">Description</option>
</select>
<br>
<div id="fixedResultsHeader">
<span>Search results</span>
<button id="resetbutton" type="button" onclick="resetsearch()" class="btn btn-xs pull-right btn-primary">Reset</button>
</div>
</div>
<div id="resultDiv" style="display:none">
<span>Search results</span>
<button id="resetbutton" type="button" onclick="resetsearch()" class="btn btn-xs pull-right btn-primary">Reset</button>
<div id="resultList">
</div>
</div>
</div>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
<script>
jQuery(document).ready(function(){
jQuery('#toggleButton').on('click', function(){
jQuery('#searchDiv, #toggleButton').toggleClass('opened');
jQuery('#toggleButton img').toggleClass('inactive');
});
var $document = jQuery('#searchDiv'),
$element = $('#mainForm'),
className = 'hasScrolled';
$document.scroll(function() {
if ($document.scrollTop() >= 250) {
// user scrolled 50 pixels or more;
// do stuff
$element.addClass(className);
} else {
$element.removeClass(className);
}
});
});
</script>
</body>
@-ms视口{宽度：设备宽度；}
@仅媒体屏幕和（最小设备宽度：800px）{html{overflow:hidden；}
*{填充：0；边距：0；}
html{高度：100%；}
正文{高度：100%；溢出：隐藏；}
div#容器{高度：100%；最小高度：100%；宽度：100%；边距：0自动；}
图迪夫{
身高：100%；
位置：相对位置；
溢出：隐藏；
}
{%include“htmlheadpanocss.tmpl”%}
div#searchDiv{
顶部：0px；
左：-320px；
过渡：左0.3s；
位置：固定；
溢出：自动；
z指数：4250；
背景：#ffffff；
填充：20px；
最大高度：100vh；
最大宽度：310px；
盒影：0px 0px 5px#555；
}
div#searchDiv.opened{
左：0px；
}
div#切换按钮{
位置：固定；
显示：表格；
顶部：20px；
左：20px；
边界半径：100px；
填充：10px；
背景：白色；
过渡：左0.3s，框影0.5s；
z指数：9999；
}
div#切换按钮p{
显示：表格单元格；
垂直对齐：中间对齐；
文本对齐：居中；
}
div#切换按钮img.inactive{
显示：无；
}
div#切换按钮img{
/*图标大小*/
宽度：20px；
高度：自动；
}
div#切换按钮：悬停{
光标：指针；
盒影：2px 2px 30px 5px#222；
}
div#toggleButton.opened{
左：320px；
背景：白色；
}
#结果列表#resultDiv{
填充顶部：20px；
}
#mainForm.hasScrolled{
位置：固定；
顶部：0px；
左：0px；
填充：20px；
背景色：白色；
最大宽度：300px；
z指数：99；
}
#主窗体#固定的ResultsHeader{
显示：无；
}
#mainForm.hasScrolled#fixedResultsHeader{
显示：块；
填充顶部：20px；
}
.列表组项目{
边界：无；
边框顶部：1px实心#eee；
填充：10px 10px；
溢出：隐藏；
文本溢出：省略号；
}
.列表组项：第一个子项{
边界半径：0px；
}
.列表项拇指{
宽度：100%；
}
/*固定盒尺寸*/
科洛博克斯分区，
ul.kolorMenu li.kolorMenuItem>p{
框大小：内容框；
-webkit框大小：内容框；
-moz框大小：内容框；
-ms框大小：内容框；
-o盒尺寸：内容盒；
}
{%include“htmlheadscripts.tmpl”%}
var panos=[
{%用于project.panoGroups%}{%用于group.panos%}
{id:{pano.tourId}，name:{{pano.description.name}，description:{{{pano.description.description | striphtmltags}}，thumb:../{{dataDirectory}/{pano.thumbnailPath}，
{%endfor%}{%endfor%}
];
函数resetsearch（）{
document.getElementById（'resultDiv'）.style.display=“无”；
document.getElementById（'texttosearch'）。innerHTML=“”；
}
函数finddesiredspot（）{
如果（texttosearch.value==“”）
{
警报（“空字符串”）；
返回；
}
var=false；
var-foundpanos=[]；
对于（i=0；i-1）
{
发现=真；
foundpanos.push（panos[i]）；
}
}
if（kindofsearch.value==“description”）
{
if（panos[i].description.toLowerCase（）.indexOf（texttosearch.value.toLowerCase（））>-1）
{
发现=真；
foundpanos.push（panos[i]）；
}
}
}
如果（找到）
{
如果（foundpanos.length==1）
{
document.getElementById（'resultDiv'）.style.display=“无”；
var callstr=“mainloadsecene（“+foundpanos[0].id+”）；
getTemplateTourPlayer（）.call（callstr）；
callstr=“looktospots（“+foundpanos[0].id+”）；
getTemplateTourPlayer（）.call（callstr）；
}
其他的
<div id="container">
<div id="tourDIV">
<div id="panoDIV">
<noscript>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100%" height="100%" id="Jordan360 Test Planedata/Jordan360 Test Plane">
<param name="movie" value="Jordan360 Test Planedata/Jordan360 Test Plane.swf"/>
<param name="allowFullScreen" value="true"/>
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="Jordan360 Test Planedata/Jordan360 Test Plane.swf" width="100%" height="100%">
<param name="movie" value="Jordan360 Test Planedata/Jordan360 Test Plane.swf"/>
<param name="allowFullScreen" value="true"/>
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"/>
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</noscript>
</div>
<script type="text/javascript" src="Jordan360 Test Planedata/Jordan360 Test Plane.js"></script>
<script type="text/javascript">
embedpano({
swf:"Jordan360 Test Planedata/Jordan360 Test Plane.swf"
,target:"panoDIV"
,passQueryParameters:true
,wmode:"opaque"
});
</script>
</div>
</div>