{

Tobias Scheible
Autor, Referent & IT-Sicherheitsexperte
einzelne Seiten hervorheben

Datum: Donnerstag, 13. Juni 2013

Autor: Tobias Scheible

Kommentar(e): 7 Kommentare

Kategorie: Web Development

Tags: Android, 360, Panorama, Photo Sphere

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.

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
  • Artikel teilen:

Über Tobias Scheible

Tobias Scheible

Tobias Scheible arbeitet als wissenschaftlicher Mitarbeiter an der Hochschule Albstadt-Sigmaringen. Dort ist er als Autor und e-Tutor im Masterstudiengang Digitale Forensik tätig und leite im Bachelorstudiengang IT Security Praktika rund um das Thema Informationssicherheit. Darüber hinaus ist er Mitinitiator des Kompetenzzentrums Cyber Security Lab, welches Forschungsprojekte auf dem Gebiet der IT-Sicherheit koordiniert. Zusätzlich hält er Vorträge und Workshops zu aktuellen Themen der IT-Sicherheit.

Alle Blog-Artikel Website Facebook Twitter Xing

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>

nach oben