Auto Tour

Fragen und Antworten zu Pano2VR in deutscher Sprache
Post Reply
Rippel
Posts: 1
Joined: Wed Jun 29, 2011 11:23 am

Wed Jun 29, 2011 11:51 am

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,
wolff
Posts: 114
Joined: Mon Feb 18, 2008 11:15 am

Mon Jul 25, 2011 3:40 pm

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="..." ...>]

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>
Per Stylesheet wird aber zunächst keines der Panos angezeigt [ siehe #eins[etc.] { display:none; } ]

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;
}
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:

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);
}
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:
Image

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.
wolff
Posts: 114
Joined: Mon Feb 18, 2008 11:15 am

Tue Jul 26, 2011 2:45 pm

...und jetzt auch mit Karte/Übersichtsplan.
Den angegebenen Code habe ich jeweils angepasst.
Post Reply