Hallo,
Gibt es eine Möglichkeit, zb nach einer Drehung 360° zu sagen, gehe zum nächsten Panorama? Oder eine JS-Lösung? Finde schade das solche Sachen nicht schon mit drin sind.
LG,
Auto Tour
Hallo,
ich habe mir die Frage der Umsetzung einer Auto-Tour auch schon mal gestellt und ein bisschen herumprobiert.
Es funktioniert! Das Ergebnis ist zu sehen unter: http://www.panoscope.de/autotour/start.html
Die Lösung lässt sich u.a. mit JavaScript umsetzen. Ich bin folgendermaßen vorgegangen:
Die Html-Startseite lädt scheinbar alle (in diesem Fall drei) Panoramen [per <object classid="..." ...> und <embed src="..." ...>]
Per Stylesheet wird aber zunächst keines der Panos angezeigt [ siehe #eins[etc.] { display:none; } ]
Panorama 1 wird erst durch die JavaScript-Funktion ['pano_1()'] (wird indexmäßig im Html-Dokument aufgerufen) und die Steuerung des Stylesheets durch JavaScript [eins.style.display = "block";] sichtbar gemacht:
Schließlich wird nach 17 Sekunden die nächste Funktion aufgerufen [setTimeout("pano_2()", 17000);] und damit erst die nächste SWF sichtbar (bei der in Pano2VR voreingestellten Drehgeschwindigkeit "0,4" pro Bild wird etwa in 17 Sek eine 360°-Drehung vollzogen - okay, ist nicht ganz genau).
Achtung: Der Ladevorgang wird mitgezählt, d.h. bei langsamer Internetverbindung hat der User nur den halben Spaß; das Neuladen kommt dann zu früh, deswegen in der .js-Datei die Zeit (Zahlenwert) eventuell erhöhen.
Die Panoramen bleiben jeweils voll steuerbar (Skin ist im vorliegenden Fall enthalten und wird jeweils mit geladen).
Wichtig: Stylesheet [style.css] und Javascript-Code [autotour.js] wurden in Unterordnern ausgelagert, deshalb ist die Ordnerstruktur wichtig:
Das vorliegende Beipiel ist sehr einfach gehalten.
Auch garantiere ich nicht für die vollständige Funktions-Kompatibilität des gesamten Codes!
Viel Vergnügen beim Selbstbau einer automatischen Tour!
Gruß W.
ich habe mir die Frage der Umsetzung einer Auto-Tour auch schon mal gestellt und ein bisschen herumprobiert.
Es funktioniert! Das Ergebnis ist zu sehen unter: http://www.panoscope.de/autotour/start.html
Die Lösung lässt sich u.a. mit JavaScript umsetzen. Ich bin folgendermaßen vorgegangen:
Die Html-Startseite lädt scheinbar alle (in diesem Fall drei) Panoramen [per <object classid="..." ...> und <embed src="..." ...>]
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Panorama-Tour</title>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<script type="text/javascript" src="./js/autotour.js"></script>
</head>
<body onload="pano_1();">
<h1>Panorama-Tour - automatisch</h1>
<div class="pano">
<div id="eins">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="770" height="300">
<param name="movie" value="pano_1.swf"><param name="quality" value="high">
<embed src="pano_1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="770" height="300"></embed></object>
</div>
<div id="zwei">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="770" height="300">
<param name="movie" value="pano_2.swf"><param name="quality" value="high">
<embed src="pano_2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="770" height="300"></embed></object>
</div>
<div id="drei">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="770" height="300">
<param name="movie" value="pano_3.swf"><param name="quality" value="high">
<embed src="pano_3.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="770" height="300"></embed></object>
</div>
<p><a href="http://www.panoscope.de">www.panoscope.de</a></p>
</div>
</body>
</html>
Code: Select all
body {
text-align:center;
}
.pano {
position:relative;
width:770px;
height:300px;
left:0;
right:0;
margin:auto;
}
#eins {
display:none;
}
#zwei {
display:none;
}
#drei {
display:none;
}
Code: Select all
/**
* @author
*/
function pano_1() {
var eins = document.getElementById("eins");
eins.style.display = "block";
var zwei = document.getElementById("zwei");
zwei.style.display = "none";
var drei = document.getElementById("drei");
drei.style.display = "none";
setTimeout("pano_2()", 17000);
}
function pano_2() {
var eins = document.getElementById("eins");
eins.style.display = "none";
var zwei = document.getElementById("zwei");
zwei.style.display = "block";
var drei = document.getElementById("drei");
drei.style.display = "none";
setTimeout("pano_3()", 17000);
}
function pano_3() {
var eins = document.getElementById("eins");
eins.style.display = "none";
var zwei = document.getElementById("zwei");
zwei.style.display = "none";
var drei = document.getElementById("drei");
drei.style.display = "block";
setTimeout("pano_1()", 17000);
}
Achtung: Der Ladevorgang wird mitgezählt, d.h. bei langsamer Internetverbindung hat der User nur den halben Spaß; das Neuladen kommt dann zu früh, deswegen in der .js-Datei die Zeit (Zahlenwert) eventuell erhöhen.
Die Panoramen bleiben jeweils voll steuerbar (Skin ist im vorliegenden Fall enthalten und wird jeweils mit geladen).
Wichtig: Stylesheet [style.css] und Javascript-Code [autotour.js] wurden in Unterordnern ausgelagert, deshalb ist die Ordnerstruktur wichtig:
Das vorliegende Beipiel ist sehr einfach gehalten.
Auch garantiere ich nicht für die vollständige Funktions-Kompatibilität des gesamten Codes!
Viel Vergnügen beim Selbstbau einer automatischen Tour!
Gruß W.
Last edited by wolff on Tue Dec 13, 2011 10:02 am, edited 2 times in total.
...und jetzt auch mit Karte/Übersichtsplan.
Den angegebenen Code habe ich jeweils angepasst.
Den angegebenen Code habe ich jeweils angepasst.