Tobias Scheible Cyber Security & IT-Forensik Dozent
einzelne Seiten hervorheben

Photo Sphere in Website einbinden

Ich habe hier in meinem Blog schon einmal über die Möglichkeit geschrieben, 360°-Aufnahmen mit JavaScript in eine Website einzubinden. Damals basierte das Ganze noch auf dem Web-Viever von Joe Simpson. Mittlerweile hat Google eine eigene Methode veröffentlicht.

Donnerstag, 13. Juni 2013
7 Kommentare

Dazu hat Google einen eigenen Viewer veröffentlicht. Die Einbindung ist eigentlich ganz einfach. Als erstes muss die Google+ JavaScript-API eingebunden werden und dann das proprietäre g:panoembed Element.

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:panoembed imageurl="foto.jpg" fullsize="4096,2048" croppedsize="4096,1380" offset="0,480" displaysize="600,400"/>

Und so sieht das Ganze in live aus:

Hier geht es zu meiner „alten“-Version und weitere Informationen gibt es auf der Google Developers Seite.

Und so sieht die komplette Foto-Datei im Rohformat aus:

360°-Aufnahmen der Burg Hohenzollern
360° Photo-Sphere Aufnahme der Burg Hohenzollern
360°-Aufnahmen der Burg Hohenzollern 360° Photo-Sphere Aufnahme der Burg Hohenzollern

Über Tobias Scheible

Tobias Scheible

Hallo, mein Name ist Tobias Scheible. Ich bin begeisterter Informatiker und Sicherheitsforscher mit den Schwerpunkten Cyber Security und IT-Forensik. Mein Wissen teile ich gerne anhand von Fachartikeln hier in meinem Blog. Als Referent halte ich Vorträge und Workshops für Verbände und Unternehmen u. a. auch offene Veranstaltungen für den VDI und die IHK.

Kommentare

Marc

Vielen Dank, wirklich ein klasse Tipp um die Homepage etwas aufzupäppeln, sieht man ja noch nicht so oft…

Nina

Das sieht ja super aus.

Gefällt mir.

Lisa

Geile Technik von Google. Umsetzung sieht auch sehr gut aus, wie ich finde, auf jeden Fall leicht bedienbar und keine Aussetzer.

Da hab ich schon deutlich schlechtere Varianten gesehen!

Björn

Wow. Ist die 360° Funktion auch auf Photoshop verfügbar oder kann man diese nur bei der Aufnahme mit beispielsweise eines iPhones erstellen?

Tobias Scheible

Photoshop kann so etwas natürlich auch: Adobe Hilfe

Peter Winninger

Muss (leider) ohne PlugIn auskommen, da es bei WordPress gehostet ist. Aber auch der „Umweg“ über den Link bei Google Maps Views und Einbindung des iframe-Codes funktioniert prima. Und wertet obendrein den Blogartikel noch ein bisschen auf. 🙂

Kateryna

Interessant….gefällt mir!

Schreibe einen Kommentar!

Hilfe zum Kommentieren

Um kommentieren zu können, geben sie bitte mindestens ihren Namen und ihre E-Mail-Adresse an. Bitte nutzen Sie die Kommentarfunktion nicht dazu, andere zu beleidigen oder Spam zu verbreiten. Trolle und Spammer sind hier unerwünscht! Unangemessene Kommentare, die zum Beispiel gegen geltendes Recht verstoßen oder eine Gefährdung anderer Besucher darstellen, werden gelöscht oder angepasst.

Name: Ihr Name, der oberhalb des Kommentars steht, gerne auch Ihren echten Namen, das erleichtert die Kommunikation für alle. Sollte ein Spam-Keyword als Name verwendet werden, kann dieses entfernt oder korrigiert werden.

E-Mail: Ihre E-Mail Adresse dient zur Identifizierung weiterer Kommentare und sie haben die Möglichkeit, ein Avatar-Bild zu verwenden. Dazu müssen Sie mit Ihrer E-Mail Adresse bei Gravatar angemeldet sein. Die E-Mail Adresse wird natürlich nicht veröffentlicht und nicht weitergegeben.

Website: Hier können Sie ihren eigenen Blog bzw. ihre eigene Website eintragen, dadurch wird Ihr Name und Ihr Avatar-Bild verlinkt. Werden rein kommerzielle Angebote offensichtlich beworben, setze ich den Link auf nofollow und unangemessene werden einfach entfernt.

Erlaubte HTML-Tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <hr> <big> <small> <sub> <sup> <u>

Ihre E-Mailadresse wird nicht veröffentlicht. Mit dem Absenden anerkennen Sie die Datenschutzerklärung des Blogs.