mit javascript eine Panorama extern steuern (aus und einzoome)

  • Ich habe noch ein bißchen gebastelet aber ganz nicht hinbekommen
    Ich denke das das javascript nicht genau weiß welches Panorama er einzoomen soll
    hier der test

    http://www.panorade.de/upload/2011/09_regensburg/Pano_mit_footer2_neu.html#


    schau dir bitte mal den code an


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head>
    <title>http://www.panorade.de - regensburg_4</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <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; }
    a{ color:#AAAAAA; text-decoration:underline; }
    a:hover{ color:#FFFFFF; text-decoration:underline; }
    </style>

    <link rel="stylesheet" href="css/footer_fixed_width.css" type="text/css" media="screen" /><!-- Footer Stylesheet -->

    <script type="text/javascript" src="js/jquery.js"></script><!-- jQuery -->
    <script type="text/javascript" src="js/hoverintent.js"></script><!-- HoverIntent -->
    <script type="text/javascript" src="js/footer.js"></script><!-- Footer Script -->
    <script type="text/javascript">
    $(document).ready(function($){
    $('#footer').stickyFooter({
    speed : 'fast',
    effect : 'hover_fade',
    showhidefooter : 'show',
    hide_speed : 1000,
    hide_delay : 2000
    });
    });

    </script>
    </head>
    <body>


    <ul id="footer" class="footer_fixed"><!-- BEGIN FOOTER -->


    <li id="footer_home"><a href="#"><img src="img/footer_home.png" alt="Home" /></a></li>
    <li><a href="#" class="dropup">Panoramaauswahl</a>
    <div class="footer_dropup drop8columns">
    <div class="col_8">

    <h4>Panoramen von Regensburg</h4>
    <hr />

    <hr />
    <a href="#" onclick="loadpano('regensburg_61.xml');"><img alt="" class="img_left" src="img/asset01.jpg" height="80" width="150"/>Panorama anschauen</a>
    <p>Regensburg liegt am nördlichsten Punkt der Donau und den Mündungen der linken Nebenflüsse Naab und Regen. Im Stadtgebiet liegen zwei Donauinseln, der Untere und der Obere Wöhrd.</p>

    <hr />
    <a href="#" onclick="loadpano('regensburg_31.xml');"><img alt="" class="img_left" src="img/asset02.jpg" height="80" width="150"/>Panorama anschauen</a>
    <p>Regensburg liegt am nördlichsten Punkt der Donau und den Mündungen der linken Nebenflüsse Naab und Regen. Im Stadtgebiet liegen zwei Donauinseln, der Untere und der Obere Wöhrd.</p>

    <hr />
    <a href="#" onclick="loadpano('regensburg_41.xml');"><img alt="" class="img_left" src="img/asset03.jpg" height="80" width="150"/>Panorama anschauen</a>
    <p>Regensburg liegt am nördlichsten Punkt der Donau und den Mündungen der linken Nebenflüsse Naab und Regen. Im Stadtgebiet liegen zwei Donauinseln, der Untere und der Obere Wöhrd.</p>

    </div>


    </div>


    </li>

    <li id="social">
    <ul>

    <!-- Hier das Menu zum ein und auszoomen u -->
    <li><a href="#" ondown="set(fov_moveforce,-1);" onup="set(fov_moveforce,0);"><img src='img/icons/plus.png' alt="" class="footer_icon" /><span>Einzoomen</span></a></li>
    <li><a href="#" ondown="set(fov_moveforce,+1);" onup="set(fov_moveforce,0);"><img src='img/icons/minus.png' alt="" class="footer_icon" /><span>Auszoomen</span></a></li>

    </ul>


    </li>


    </ul>


    <a id="footer_trigger" class="active" href="#"></a><!-- Trigger Button -->


    <div id="krpanoDIV" style="width:100%; height:100%;">
    <noscript><table style="width:100%;height:100%;"><tr style="valign:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>

    </div>


    <script src="swfkrpano.js"></script>

    <script>
    // <![CDATA[

    embedpano({swf:"regensburg_4.swf", id:"krpanoSWFObject", xml:"regensburg_41.xml", target:"krpanoDIV", wmode:"transparent"});

    function krpano()
    {
    return document.getElementById("krpanoSWFObject");
    }

    function loadpano(xmlname)
    {
    krpano().call("loadpano(" + xmlname + ", null, MERGE, BLEND(1));");
    }

    function lookat(fov)
    {
    krpano().set("movevectorz", fov);
    }


    // ]]>
    </script>


    </body>
    </html>

  • Hi Achim,

    der Zoom kann so nicht funktionieren, da Du versuchst direkt aus Javascript eine krpano interne Prozedur aufzurufen: ondown="set(fov_moveforce,+1);" onup="set(fov_moveforce,0);"

    Du musst das wie bei Deinem loadpano über eine eigene Javascriptfunktion mit aufrufen/bzw. an krp senden.
    Weiterhin heisst es im HTML/JS nicht ondown/onup, sondern onmousedown="" und onmouseup="".

  • Hallo danke dachte ich mir aber so richtig komm ich nicht weiter (nach 1 Stunde)

    hier der unter teil

    function lookat(fov)
    {
    krpano().call("lookat", fov);
    }

    function lookto(toh, tov, fov)
    {
    krpano().call( "lookto(" + toh +"," + tov + "," + fov + ")" );
    }


    und der der aufruf mal mit oncklick und onmousedown
    lookat
    <li><a href="#" class="tooltip" onclick="lookat(0,0,90);"><img src='img/icons/plus.png' alt="" class="footer_icon" /><span>test</span></a></li>

    und der lookto
    <li><a href="#" class="tooltip" onmousedown="lookto(fov(+1));" onmouseup="lookto(fov(0));"><img src='img/icons/minus.png' alt="" class="footer_icon" /><span>kleiner</span></a></li>

    mal getestet
    es tut sich nichts

    ich habe hier im forum unter
    Navigationselemente außerhalb des Panofensters auf der Webseite platzieren?
    auch schon mal gelesen
    das ist aber leider auch nichts richtiges rausgekommen
    kannst du mir bitte weiterhelfen
    danke Achim

  • Hi,

    der "lookat" Aufruf ist falsch:
    mit "call" können krpano Actions gerufen werden,
    wobei weiters mit "lookat" die hlookat/vlookat und fov direkt gesetzt werden könne,
    zum Setzen von Werten muss die "set" Funktion verwendet werden,

    hier der Link zur Dokumentation der JS-Schnittstelle:
    https://krpano.com/docu/js/

    richtig in dem Fall wäre z.B.
    <!-- Hier das Menu zum ein und auszoomen u -->
    <li><a href="#" onmousedown="krpano().set('fov_moveforce',-1);" onmouseup="
    krpano().set('fov_moveforce',0);"><img src='img/icons/plus.png' alt="" class="footer_icon" /><span>Einzoomen</span></a></li>
    <li><a href="#"
    onmousedown="krpano().set('fov_moveforce',+1);" onmouseup="krpano().set('fov_moveforce',0);"><img src='img/icons/minus.png' alt="" class="footer_icon" /><span>Auszoomen</span></a></li>

    wobei ich persönlich eher keine <a> Elemente für die Buttons verwenden würde...

    Schöne Grüße,
    Klaus

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!