Darstellung von 360-Grad Bilder

[fragra]

Hallo Community,

gibt es eine Möglichkeit, womit man 360-Grad Bilder auf der Webseite präsentieren kann?

Vielen Dank im Voraus!

Grüße aus dem Harz 

[Fischi]

Hallo Fragra, ich habe das mal über Google Maps probiert. Dort kannt Du von bekannten Lokalitäten im unteren Bereich Fotos und Videos - Street View & 360° Fotos - aus vorhandenen 360-Grad-Bildern was auswählen.. Dann über Bild teilen und einbetten den LINK über "Karten einbinden" kopieren, dort HTML kopieren wählen und in Deiner Website innerhalb [html| ... ] einbauen.
Erzeugt iframe. Funktioniert gut. Setzt aber Fotos bei Google Maps voraus.

Schau Dir mal in Chemnitz die Gegend um den Roten Turm an.
https://spielwiese.fischer-ehdorf.de/

Da Du aber sicher eigene Fotos hast, mußt Du diese umwandeln und den HTML-Code als iframe generieren lassen, z.B hier:
https://panoee.com/
Du bekommst zum Download auch dort das HTML-iframe. Das habe ich aber noch nicht probiert.

Ist ein händischer Weg für jedes Foto. Vielleicht hilft Dir das weiter.

Ein anderer Weg wäre sicher Die Erstellung eines mozilo Plugins.

P.S. Ich bin dabei, die verunglückte Variante meiner "Nicht-Plugin-Erweiterungen" auszubügeln. Mit Akkordeon schon geschehen. Andere sollen folgen.

Gruß

[fragra]

Hallo Fischi,

hab vielen Dank für deine Interessante Antwort.

Ja, ich habe eigene 360 Grad Bilder und möchte diese auf meiner Webseite so einbinden, dass die Blickwinkel auch mit der Maus gesteuert werden können.
Leider komme ich mit der von dir empfohlenen Seite zur Umwandlung nicht zurecht.

Ich bin gerade auf deiner Webseite und schaue mir die aktualisierten Plugins an, nicht schlecht. 

Da werde ich wohl auch mal Herrn Google fragen müssen.

Viele Grüße Frank

[Fischi]

Hallo Fragra, würde Dir das Beispielfoto (Chemnitz, Roter Turm) so zusagen?
Mal bei Google recherchieren: kostenlose Umwandlung von Fotos zur Einbettung als 360° Bild in Webistes.

Die Fotos müssen bestimmten Voraussetzungen genügen! - wird dort beschrieben.

Der generierte Code sieht in etwa so aus: (den kann man kopieren)
<iframe src="https://www.google.com/maps/embed?pb=!4v1777030505926!6m8!1m7!1sCAoSF0NJSE0wb2dLRUlDQWdJREN2YUd5clFF!2m2!1d50.83454076470091!2d12.92165041089104!3f319.4776065290198!4f18.967690451360326!5f0.7820865974627469" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

Genau das fügst Du auf Deiner Seite zwischen [html| ... ] anstelle der Punkte ein.
Mit width, heigth, style etc. kannst du noch gestalten.

Obiges Beispiel holt sich aber alles immer wieder von Google. Jeder Besucher wird von Google getrackt! Datenschutz!!

Wenn es Dir gelingt, Deine Fotos 360°-tauglich für die Website anzupassen, kannst du auch <iframe src ...></iframe> herunterladen. Das hast Du dann aber auf Deinem Webspace und stellst es für die Seite bereit.

Hast Du mal eines Deiner Fotos für mich? Kannst es als PM schicken.
Ich könnte es mal mit der Konvertierung versuchen. Hab´s noch nicht getan.

Gruß

[fragra]

Hallo Fischi,

Hast Du mal eines Deiner Fotos für mich? Kannst es als PM schicken.

Genau so werde ich es machen. Alles weitere dann per PN. 

Grüße aus dem Harz

[Fischi]

Eine andere Möglichkeit (komfortrabler) ist ein JavaScript-360°-Viewer. Wird in Template eingebunden und verarbeitet normale JPG- und PNG-Bilder. Optimal im Format 2:1

Dazu ist Folgendes zu tun:
1. Anpassung einmalig im Template. Erweiterung im Header:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum/build/pannellum.css">
<script src="https://cdn.jsdelivr.net/npm/pannellum/build/pannellum.js"></script>

2. Benutzerelement erstellen, z.B.:
bild_360 = <div id="panorama" style="width:100%; height:500px;"></div><script>pannellum.viewer('panorama', {type: 'equirectangular', panorama: '{VALUE}', autoLoad: true});</script>

3. Aufruf in der Seite (Bild in Kategorie Home):
[bild_360|/kategorien/Home/dateien/laenderflaggen.png]

Anmerkungen:
- bindet den Viewer online ein
- ist nur eine Prinziplösung!
- nur ein Bild je Seite möglich
- Pfadangabe manuell, ausgehend vom Template, ist so natürlich umständlich

Aber für Testzwecke erst mal funktionierend.
Beispiel hier:
https://spielwiese.fischer-ehdorf.de/

Gruß

[Fischi]

Nach Rückfrage eine kleine Klarstellung:
Punkt 1. Anpassung in template.html
- natürlich nicht im header sondern im <head> ... </head>

Beispiel in der template.html des Layouts moziloCMS:
- template.html liegt im Ordner layouts\moziloCMS (eigenes Verzeichnis finden)
- template.html im Editor öffnen
- dort wo im <head> CSS- und JS-Dateien eingebunden werden, zwei Zeilen einfügen
  (evtl. unmittelbar vor dem schließenden </head>:

...
<head>
    <meta charset="{CHARSET}">
     ...
    <title>{WEBSITE_TITLE}</title>
     ...
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum/build/pannellum.css">
    <script src="https://cdn.jsdelivr.net/npm/pannellum/build/pannellum.js"></script>
</head>
<body>
...
</body>
...

2. Benutzerelement wie oben bei den Einstellungen im Admin hineinkopieren.

3. Im Editor der Seite dann der Aufruf über Einfügung des Benutzerelementes:
[bild_360|pfad/foto.jpg]

Gruß

[Fischi]

Hallo fragra, hattest Du schon Gelegenheit, das auszuprobieren?
Eine Rückmeldung wäre erfreulich, egal ob positiv oder negativ. Interessiert vielleicht auch Andere.

Aber nochmal: ist eine reine Prinzip- und Bastellösung.

Daraus ein Plugin zu machen, ist ein ordentliches Stück Arbeit und setzt definitiv voraus:
- das Interesse sollte bei Vielen da sein
- vorher umfangreiche Recherche über umzusetzende Funktionalität

Gruß

[fragra]

Ich habe alles, wie beschrieben erledigt und das verkleinerte Bild benutzt.

Auf der Webseite wird das 360 Grad-Bild, wie folgt aufgerufen: [bild_360|/dateien/Videos/360-test.jpg]

Das Ergebnis ist noch nicht zufriedenstellend:



Inwiefern ist denn der Pfad zum Bild falsch? Dieses liegt unter Dateien im Ordner Videos.

[fragra]

*edit*

Nach eingehender Spurensuche konnte nun der korrekte Dateipfad eindeutig identifiziert werden, sodass die 360-Grad-Darstellung problemlos funktioniert.

An dieser Stelle ein herzliches Dankeschön an @Fischi für die engagierte Unterstützung und die Ausdauer bei der Lösungsfindung.

Viele Grüße