Erstmal einige Infos - mit welches Programm wurden die Panoramabilder erstellt, Anbieter des Programms, welches Format, Bilder oder Videos - bei der Vielzahl der Möglichkeiten müsste man mehr wissen.

Die einfachste Möglichkeit ist hier beschrieben, siehe

>>https://webdesign.weisshart.de/pano_css.php

Ein HTML-Objekt mit ganz wenig HTML und CSS-Code für einfaches Scrollen bei Mouseover.

Hallo Daniel, vielen Dank für die Information.

Die Bilder, die ich online stellen möchte sind mit einer Insta360 X3 aufgenommen worden. Gibt es Möglichkeiten gibt es mit der Einbindung über eine Freeware, die natürlich möglichst einfach zu handeln wäre (da bei mir keine HTML- und ähnliche Kenntnisse vorhanden sind, s.o.)? Hatte mal etwas von H5P gehört.

Ein Bildbeispiel wie es ein Viewer von Insta zeigt: https://s.insta360.com/p/f3598e6b488f6131c0ff284812028fb8

Gruß Hans

Dem Quelltext nach verwendet das verlinkte Beispiel Krpano mit Einbindung als Script.

Infos zu 360 Grad Bildern und dem Marzipano Tool mit Einbindung per Iframe in der Webseite finden sich in diesem Artikel, siehe

----- Auszug -----

Das Marzipano Tool

Im Zuge meiner Suche bin ich jedoch endlich auf eine richtig coole Seite gestoßen: Das Marzipano Tool. Vielleicht schaut ihr euch erst einmal einige Demos an, was so möglich ist. Man muss händisch mehr Schritte erledigen als bei einem Plugin, aber es funktioniert bestens.

>> https://weltreisender.net/wie-ich-360-grad-fotos-und-videos-auf-meine-webseite-einbinden-kann-68296/

-------------------

Da ich selber keine Erfahrung damit habe, kann ich keine weitere Hilfe geben.

Nachtrag:

Bei Einbindung per Iframe müsste man in WebSite X5 ein HTML-Objekt bei Punkt 4 in das Raster an die gewünschte Stelle gezogen, dann doppeltgeklickt und darin der Iframe-Code eintragen werden.

Vielen Dank Daniel,

habe mal eine Datei in den Mazipano eingebunden und über diese über den Browser angesehen; sieht gut aus.

Aber das weitere Prozedere, um das ganze in eine Website einzubinden, ist für mich zu kompliziert.

Gibt es einfachere Lösungen, die für wenig Geld zu haben sind?

Gruß Hans

Ich habe leider keine Insta360 X3 und auch keine 360 Grad Bilddatei zum Testen.

Vielleicht mal so ein 360 Grad Bild zur Verfügung stellen, dann könnte ich es testen und die benötigten Dateien sowie den Code für die Einbindung mit WebSite X5 bereitstellen.

@ Hans L.: Über dem im 3. Post verlinkten 360 Grad Bild gibt es bei "Share:" mehrere Symbole, das Symbol ganz links (</>) anklicken, dann kann mit dem oberen gelben ( Copy ) Button der Iframe-Code kopiert werden, falls das das eigene 360 Grad Bild sein sollte.

Dieser kopierte Iframe-Code kann dann in WebSite X5 in ein HTML-Ojekt eingefügt werden.

In der Vorschau kann das 360 Grad Bild nicht betrachtet werden, da der WebSite X5 Vorschaubrowser keine der hier genannten Vorrausetzung mitbringt.

Aber wenn man die Webseite mit "5 Export" auf den eigenen Webspace hochlädt ...

... dann kann man das 360 Grad Bild betrachten, es schwenken und vergrößern.

Offenbar bietet der "Viewer von Insta" alles was der Käufer der Insta360 X3 braucht, um die 360 Grad Bilder per QR-Code zu verlinken oder bei 2 chinesischen Portalen sowie bei Facebook, Twitter und auch auf der eigenen Webseite zu zeigen. Wenn dem so ist, dann ist die Sache mehr als einfach.

Hallo Daniel, beigefügt eine Datei zum testen

 Sorry, konnte die Datei nicht hoch laden, da 3 MB

Hier das Bild mit irfanview auf 1MB "reduziert"

Habe es jetzt getestet und neben Screenshot auch eine Anleitung erstellt, siehe unten

Anleitung für das Marzipano Tool, um 360 Grad Bilder per Iframe-Code in WebSite X5 zu nutzen

1) Auf die Webseite >> https://www.marzipano.net/tool/ gehen und hier erst auf "Start" klicken, dann auf "Select files" klicken. Jetzt sollte sich die Ordneransicht auf dem eigenen PC öffnen, hier dann das gewünschte 360 Grad Bild markieren und unten rechts auf "öffnen" klicken.

2) Nun wird das 360 Grad Bild auf der Marzipano Webseite in Bewegung angezeigt. Jetzt rechts oben auf "Export" klicken und es werden die erforderlichen Dateien als ZIP-Datei auf dem PC normalerweise im Downloadordenr abgelegt.

3) Jetzt auf dem PC im Downloadordner die ZIP-Datei "project-title" mit der rechten Maustaste anklicken und im kleinen Auswahlmenü auf "Alle extrahieren..." klicken, dann sollte es im Downloadordner den Ordner "project-title" geben.

4) Im Ordner gibt es 2 Textdateien LICENSE (Hinweise zu den Lizensen) und README (Anleitung in englisch).

5) Den Ordner "app-files" öffnen und das 360 Grad Bild dort einfügen.

6) Den Ordner "app-files" unbennen, z.B. in "360grad-hoffest-2022", hierbei auf Leerzeichen sowie öäüß verzichten.

7) Bei weitere Bildern wie bei Punkt 1) bis 6) vorgehen. Die weiteren Downloaddateien des Marzipano Tools werden dann auf dem PC nummeriert, also project.title(1), project-title(2) usw.

8) Bei den weiteren Downdateien wie bei Punkt 3) bis 6) vorgehen.

9) Nun hat man also mehrere Ordner wie z.B.

[ 360grad-hoffest-2022 ]
[ 360grad-80-geburtstag-Oma ]
[ 360grad-stadtpark-musterstadt ]

10) Diese Ordner, siehe Punkt 9), samt Inhalt lädt man dann auf den Webspace hoch, dort wo auch die Website ist, egal ob diese mit WebSite X5 erstellt wurde oder mit einem anderen Programm.

11) Jetzt brauchen wir den Iframe-Code, z.B. den von der Seite von weltreisender.net:

<iframe src="360grad-hoffest-2022/index.html" width="800" height="600" framerborder="0" marginwidth="0" marginheight="0" scrolling="no" allowfullscreen="allowfullscreen"></iframe>

Dieser Iframe-Code kann auch für die anderen 360 Grad Bilder verwendet werden, aber es muss natürlich jeweils der Ordnername - 360grad-hoffest-2022 - geändert werden.

Sicherheitshalber noch die Ergänzung, damit die Anleitung komplett ist.

12) Jetzt mit WebSite X5 über "3 Sitemap" die gewünschte Seite markieren und rechts oben auf "Weiter" klicken, dann ein HTML-Objekt ins Raster an die gewünschte Stelle ziehen, doppelt klicken und den Iframe-Code von Punkt 11) einfügen. Nun rechts oben auf "OK" klicken.

In der Vorschau wird anstelle des 360 Grad Bilder nur die Meldung "Cannot load the page index.html" angezeigt, erst nach dem Hochladen mit "5 Export" können die 360 Grad Bilder betrachtet werden.

Nachtrag:

Bei vielen Bildern ist es ratsam, der übersichthalber, auf dem Webspace ein Verzeichnis "360grad-bilder" zu erstellen und dort hinein die vielen Ordner von Punkt 9) meiner Anleitung zu laden, z.B. solche

[ 360grad-hoffest-2022 ]
[ 360grad-80-geburtstag-Oma ]
[ 360grad-stadtpark-musterstadt ]

... usw.

Der Iframe-Code müsste dann um diesen Verzeichnamen erweitert werden, z.B.

<iframe src="360grad-bilder/360grad-hoffest-2022/index.html" width="800" height="600" framerborder="0" marginwidth="0" marginheight="0" scrolling="no" allowfullscreen="allowfullscreen"></iframe>

Nachtrag 2:

Die 2. Möglichkeit. Natürlich könnte man auch kleine Vorschaubilder der 360 Grad Bilder erstellem, diese auf die Seite setzen und so verlinken, dass sie in einen neuen Fenster öffnen. Dort könnten die Besucher sie dann auch bildschirmfüllend (bis auf den kleinen Streifen oben) betrachten.

Nachtrag 3:

Die 3 Möglichkeit wurde ja schon oben erwähnt, einfach den von Insta360 erzeugten Iframe-Code ...

<iframe class="embed_iframe" src="https://s.insta360.com/p/f3598e6b488f6131c0ff284812028fb8?e=true&locale=en-us" frameborder="0" width="666" height="413"></iframe>

... verwenden. Damit will ich die Sache mal schliessen - irgendeine der 3 Möglichkeiten sollte passen.