WebSite X5Help Center

 
Richard L.
Richard L.
User

Einbindung von 360 Grad Panaoramafotos  de

Autor: Richard L.
Besucht 800, Followers 1, Geteilt 0  

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?

Gepostet am
7 ANTWORTEN - 3 NüTZLICH
Andreas S.
Andreas S.
Moderator

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.

Mehr lesen
Gepostet am von Andreas S.
Andreas L.
Andreas L.
User

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

Mehr lesen
Gepostet am von Andreas L.
Michael E.
Michael E.
User

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

Mehr lesen
Gepostet am von Michael E.
Andreas L.
Andreas L.
User

Tausend Dank

Mehr lesen
Gepostet am von Andreas L.
Michael E.
Michael E.
User

Gerne,

einfach sagen/fragen wenn es nicht auf auf Anhieb klappt ....

Mehr lesen
Gepostet am von Michael E.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Richard L.
Ich möchte 360 Grad Fotos die mit der neuen Insta 360oneX geamct wurden in eine Webseite einbinden. ... ...  Hier hat man die Möglichkeit Javascript ..[*** ***]... ...  Leider funktioniert die Einbindung von iframes nicht responsive!! Welche Möglichkeiten gibt es? ....

(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=1frameborder="0"   width="100%frameborder="0"  height="200"  allowfullscreen  style="position:absolute;height:100%;top:0px;left:0px;" ></iframe>

.

ciao

.

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪