0
我使用名爲Kolor的程序製作了全景圖。因此，我正在嘗試添加正在搜索全景圖片的find pano功能，以便它們可以顯示。 我發現了一個包含搜索功能的HTML文件，但似乎知道如何將它與原始html文件合併。 而在幫助論壇中，它沒有任何幫助。 這裏查找全景圖文件：向Kolor Panotour添加查找Pano功能
<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>
這裏的地方的搜索應該是文件：
<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>