Virtuelle Panoramen einbetten

Sie haben von uns ein virtuelles Panorama oder virtuelle Tour abonniert. Wie bekommen Sie die jetzt auf Ihre Webseite? Im Prinzip ist das ganz einfach, auch wenn es so komisch aussieht und wir Ihnen Code-Kauderqwelsch zur Verfügung stellen.

Was steckt im Code?

Keine Angst, wir jubeln Ihnen keine versteckten Anzeigen unter und schon gar keinen Schadcode. Der Grund warum Sie nicht eine Datei von uns bekommen, ist, das ein virtuelles Panorama aus ganz vielen Dateien besteht und außerdem zwischen 40 und 500 Megabyte groß sein kann.

Warum ist das so groß?

Unsere Panoramabilder haben eine Dimension von bis zu 15000 x 7500 Pixel und sind als JPG-Datei so um die 70 MB groß. Das Panoramabild wird für die Anzeige als virtuelles Panorama von einer speziellen Software in ganz viele Bilder – sogenannte Kacheln – zerlegt. Das ist so, damit zum Beispiel für das Smartphone nicht die 70 MB übertragen werden, sondern eine kleinere Version. So ist für jede Ansichtgröße eine spezielle Version im virtuellen Panorama enthalten. Genial nicht wahr?

<div style="position: relative;padding-bottom: 63%;padding-top: 35px;height: 0;overflow: hidden;margin-bottom: 35px;">
     <iframe src="https://xxx.com/wp-content/uploads/touren/Bremerhaven-Zoo-am-Meer.html" style="position: absolute;top:0;left: 0;width: 100%;height: 100%;border: 0px;" width="100%" height="500" frameborder="0">
     </iframe>
</div>
Bremerhaven Zoo am Meer © 2015 Adrian J.-G. Wackernah

Das DIV Element zwingt den nachfolgenden IFRAME in ein Responsive Korsett. Das DIV umschließt also das Panorama und steuert die Anzeigegröße je nach verwendetem Display. Wenn ich auf einem Desktop Computer das Panorama mit einer festen Höhe 500px anzeigen lasse, dann würde das auf einem Smartphone den ganzen Bildschirm einnehmen. Das DIV sorgt dafür, das sich die Höhe des Panoramas automatisch der Displaygröße anpasst.

Die Werte für Breite und Höhe der Anzeige – die width- und height-Werte – sind von uns lange ausprobiert und schließlich als optimal bewertet worden und sollten bitte so verwendet werden.

Im DIV steckt das IFRAME. In einem IFRAME kann man komplette HTML-Inhalt und -Seiten von fremden Webseiten einbetten. In unserem Fall die Seite Bremerhaven-Zoo-am-Meer.html, die das Panorama enthält.

Zum Schluß – also unter dem Panorama – steht dann der Titel des Panos und das Copyright. Das lassen Sie bitte unbedingt stehen. 🙂