Einbindung von 360 Grad Panaoramafotos 
Author: Richard L.Ich möchte 360 Grad Fotos die mit der neuen Insta 360oneX geamct wurden in eine Webseite einbinden.
Alternativ würde auch ein Panorama aus meinem DERMANDAR Account gehen. http://pnr.ma/eQowRa
Hier hat man die Möglichkeit Javascript
<div style="display:inline;"><style>.holder_1557922992991 { margin:auto; position: relative; width: 100%; border-radius:5px; border: 5px solid #000000; display: block; background-color: rgba(255,255,255,0.0); box-sizing: border-box; } .holder_1557922992991:before{ content: ""; display: block; } .aspectratio_1557922992991:before { padding-top: 33.333333333333336%; } .pano_1557922992991 { position: absolute !important; left:0px; top:0px; bottom:0px; right:0px; width: 100%; height: 100%; display: block; background-color: #000000; border:1px solid #959595; border-radius:0px; box-sizing: border-box; }</style>
<div class="holder_1557922992991 aspectratio_1557922992991" style="width:100%;"><div id="dmd_pano_eQowRa" dmd_ps="1" class="pano_1557922992991" dmd_fs="1" dmd_cp="1"></div></div>
</div><script type="text/javascript">var dmdEmbeds = dmdEmbeds || [];
(function(){ dmdEmbeds.push("eQowRa");})();</script>
<script type="text/javascript" src="//static.dermandar.com/js/nembed.js.php?v=107.17.6"></script>
bzw. einen iframe zu generieren.
<iframe AllowFullScreen="true" src="//www.dermandar.com/p/eQowRa?a=1&c=1&f=1" scrolling="no" width="800px" height="266px" style="width:800px; height:266px; overflow:auto; border:0px none transparent; background-color:rgba(0,0,0,1); padding:0px; margin:0px;" frameborder="0"></iframe>
Leider funktioniert die Einbindung von iframes nicht responsive!!
Welche Möglichkeiten gibt es?
Ifames kann man schlecht responsive machen, weil die Werte ja von der anderen Seite kommen und nicht von deiner Website. Außerdem hast du ja auch keine "%" Werte eingetragen bei dem Iframe Code.
Der erste Code funktioniert ganz normal. Allerdings nicht im Vorschaubrowser sondern mit Firefox oder Chrome wenn du diese auswählst. Von den Maßen passt es sich auch normal an was ich so getestet habe.
Hallo Richard,
360°-Fotos könntest du auch leicht mit https://pannellum.org/ einbinden (open source).
Ich habe vor einiger Zeit damit eine Testseite mit X5 gemacht: https://www.festungkufstein360.com/
Schöne Grüsse
Michael
Hallo Michael E.,
danke für deinen Tipp. Wäre sehr gut wenn Du mal kurz hier Informierst wie du dabei vorgegangen bist.
Vielen Dank dafür
Gruß
Andreas
Hi Andreas,
das ist eigentlich ganz leicht:
Auf der Panellum-Seite sind einige Code-Beispiele für die Einbindung: Beispielcode
Wichtig: Ich habe die API verwendet, dann braucht man keinen iframe. Den JS-Script einfach in das HTML-File einbauen. In einem HTML-Objekt rufe ich dann das das entprechende Panorama über ein <div id="xy"> auf. Die benötigten Files pannellum.js and pannellum.css habe ich auf meinen Webserver geladen und im <HEAD> die Verweise dazu angelegt. Einfach im Quellcode nachschauen ...
Wichtig ist noch die maximale Grösse des Panoramas: Ich glaube max. 4096px Breite (Beschränkung WebGL). Ob das noch aktuell ist, weiss ich allerdings jetzt auch noch. wer mehr Qualität haben möchte kann auch das Multiresolution panorama verwenden, ist da auch beschrieben ...
Schöne Grüsse
Tausend Dank
Gerne,
einfach sagen/fragen wenn es nicht auf auf Anhieb klappt ....
(It > De)
>> siehe Beispiel mit deinem 360 ... 100/100 ... (Ctrl+U) - (temporär)!
... versuchen, einige Variationen, die ich vor einigen Jahren für das elastische IFRAME entwickelt hatte, zu integrieren...
... mein Code (Colombos Ei)! ist sehr einfach und passt den IFRAME in jedem HTML-Code-Objekt oder in jedem Fenster an; ... diesen Code direkt kopieren / einfügen, elementar:
<iframe src="//www.dermandar.com/p/eQowRa?a=1&c=1&f=1" frameborder="0" width="100%" frameborder="0" height="200" allowfullscreen style="position:absolute;height:100%;top:0px;left:0px;" ></iframe>
.
ciao
.