Seite 1 von 2

Wie bekomme ich in den Header eine 360 grad Tour

Verfasst: Mi 27. Jan 2021, 14:20
von Volker
Hallo,

ich hätte gerne sowas hier :

https://www.3dvista.com/de/

Also anstatt eines Videos oder Bild im Header eine 360 Grad Tour. Wie kann ich das mit MB machen ?
Einer ne Ahnung ?

Gruß Volker

Re: Wie bekomme ich in den Header eine 360 grad Tour

Verfasst: Mi 27. Jan 2021, 14:43
von Tommy Herrmann
Moin,

na was hast Du denn dazu für Skripte, die müsste man zumindest mal sehen um einen Rat zum Einbau geben zu können.

Re: Wie bekomme ich in den Header eine 360 grad Tour

Verfasst: Mi 27. Jan 2021, 15:55
von Volker
Was meinst Du für Scripte ? die von dem 360 Grad Player ?

Re: Wie bekomme ich in den Header eine 360 grad Tour

Verfasst: Mi 27. Jan 2021, 16:02
von Tommy Herrmann
Du - ich habe so etwas auch noch nicht eingebaut und habe keine Ahnung welche Skripte so ein 360 Grad Player verwendet. Da müssten doch JavaScripts und HTML-Codes dabei sein, um das überhaupt anzeigen zu können.

Das hast Du doch selbst schon x-fach verbaut. Was willst Du denn hier dann überhaupt genau wissen?

Das als Header zu machen sollte doch ebenso funktionieren wie in einem anderen Block - nur eben ganze Höhe und ganze Breite - "cover" - eben.

Re: Wie bekomme ich in den Header eine 360 grad Tour

Verfasst: Mi 27. Jan 2021, 16:04
von Volker
Ich baue die immer als Iframe ein Tommy,
aber da liegt ja noch Text drüber bei denen, so wie in den MB Headern. Das läuft ja quasi unter dem Text oder irre ich mich jetzt ?

<iframe width="800" height="600" src="https://360p.eu/womo/hymer.html" frameborder="0" allowfullscreen=""></iframe>

Re: Wie bekomme ich in den Header eine 360 grad Tour

Verfasst: Mi 27. Jan 2021, 16:16
von Tommy Herrmann
Ja - Du kannst das dann natürlich nicht als Iframe einbinden, sondern solltest mal versuchen diesen Code direkt in einen Block - also im <body> - einzubauen.

Code: Alles auswählen

    <div align="center" style="height: 100%; overflow:hidden;">
    <noscript><div style="color: red; width: 30%; border: 1px solid red; padding: 4px; font-family: sans-serif;">ERROR: Your web browser must have JavaScript enabled to show this panorama.</div></noscript>
    <div id="panoStudioViewerID" style="position: absolute; left: 0px; top: 0px; width: 100% ; height: 100% ;"></div>
    <script type="text/javascript" src="panoStudioViewer.js"></script>
    <script type="text/javascript">panoStudioViewer.insert("panoStudioViewerID","hymer.json",{html5:"disable_webgl_warning"});</script>

... aber - ich befürchte, dass ist mir dann auch zu theoretisch - weil man das dann schon direkt testen müsste. Dann benötigt man auch das Script "panoStudioViewer.js" - so wie auch alle anderen Dateien dazu.

Dann müsste man gucken, ob man da noch ein transparentes <div> mit einem höheren z-index und mit dem Text drüber legen könnte.

Ich glaube - da muss ich auch passen. Jedenfalls kann man das nicht ausprobieren ohne alle dazugehörigen Dateien direkt am PC zu haben.

Re: Wie bekomme ich in den Header eine 360 grad Tour

Verfasst: Mi 27. Jan 2021, 16:18
von Volker
Na die Dateien kann ich Dir gerne geben :D

Re: Wie bekomme ich in den Header eine 360 grad Tour

Verfasst: Mi 27. Jan 2021, 16:50
von Tommy Herrmann
nee - Du - das ist mir zu aufwendig :eek:

Die Bilder und alles müsste ich haben und das gesamte Script erst einmal verstehen.

Deswegen sage ich ja - wenn Du es verstehst - dann versuche das doch zunächst nicht via Iframe einzubauen, sondern direkt. Dazu müssen nur alle dazugehörigen Dateien im Stammverzeichnis von diesem Mobirise-Projekt liegen.

Das mit der Schrift darüber kann ich entweder heraus finden oder ein Profi wie Werner uns sagen.

... vielleicht funktioniert ja auch ein dynamischer Iframe:

https://mobirise-tutorials.com/Nachrich ... misch.html

Re: Wie bekomme ich in den Header eine 360 grad Tour

Verfasst: Do 28. Jan 2021, 21:56
von Werner-Zenk.de

Re: Wie bekomme ich in den Header eine 360 grad Tour

Verfasst: Fr 29. Jan 2021, 06:33
von Tommy Herrmann
Huii - was es alles gibt - danke Werner :tu:

Re: Wie bekomme ich in den Header eine 360 grad Tour

Verfasst: Fr 29. Jan 2021, 14:20
von Volker
Ja kenn ich schon lange, was soll mir das bringen ?
Hab ja eine Software für 360 ° Panoramen inkl. Player.

Re: Wie bekomme ich in den Header eine 360 grad Tour

Verfasst: Fr 29. Jan 2021, 15:25
von Tommy Herrmann
... ich dachte, das wäre was Du suchst. Ein Tool bei dem das alles direkt online erstellt wird - ist es das denn nicht. Ich habe es jetzt nicht durch probiert - sieht doch aber so aus:

https://www.marzipano.net/tool/

Re: Wie bekomme ich in den Header eine 360 grad Tour

Verfasst: Fr 29. Jan 2021, 15:37
von Volker
Das was Marzipano liefert habe ich doch schon auf Festplatte, bzw. im Netz.

Wie man diese 360 ° Animation, die ja mehrere Bilder sind und mittels Java Player dargestellt werden als Hintergrund in einem Header Block in MB einbaut war meine Frage, Ich hatte doch ein Beispiel gepostet, wo man dies so gemacht hat.

In den MB Headern kann man ja ein Bild, ein Video oder eben nur eine Farbe als Hintergrund einstellen. Wie bekomme ich MB dazu, eine solche 360 ° Animation zu nehmen ?

Re: Wie bekomme ich in den Header eine 360 grad Tour

Verfasst: Fr 29. Jan 2021, 15:49
von Tommy Herrmann
... also ich kenne mich mit diesen Skripten überhaupt nichts aus und weiß nicht, ob ich das eingebaut bekäme. Insofern kann ich auf Verdacht dazu auch nichts sagen.

Sicherlich geht es irgendwie.

Wenn Du willst, dann erstelle mir eine ZIP-Datei mit allen dafür notwendigen Dateien. Also sämtlichen Bildern, Skripten und JavaScripts, CSS-Dateien, usw.

Lade diese ZIP-Datei dann auf den Server und sende mir den Link, dann kann ich diese Datei downloaden. Also so ungefähr.

DeineDomain.de/download/360_Grad.zip

Dann würde ich mal kurz gucken - vielleicht morgen oder am Sonntag. Habe gerade eine Menge andere Dinge um die Ohren, die mich beschäftigen.

Re: Wie bekomme ich in den Header eine 360 grad Tour

Verfasst: Fr 29. Jan 2021, 15:57
von Volker
Das wäre echt super Tommy, wenn Du mal schaust ob Du da eine Lösung hättest.

Hier der Link : https://kfz-fotograf.de/tommy.zip

Re: Wie bekomme ich in den Header eine 360 grad Tour

Verfasst: Fr 29. Jan 2021, 17:13
von Tommy Herrmann
Hallo Volker,

ich habe das noch probiert - im Prinzip wäre das so ganz einfach - aber die Anzeige MUSS über eine absolute Position erfolgen und das funktioniert so mit Mobirise nicht.

Es geht nicht, zumindest wüsste ich nicht wie ...

Dau müsste man alle diesen Haufen von Skripten erst einmal studieren und komplett verstehen. Aber auch dann bezweifele ich das, denn das korrespondiert nicht mit den JS- und Bootstrap-Dateien von Mobirise.

Re: Wie bekomme ich in den Header eine 360 grad Tour

Verfasst: Fr 29. Jan 2021, 18:01
von Volker
Schade :crying:

Aber danke für Deine Mühe Tommy.

Re: Wie bekomme ich in den Header eine 360 grad Tour

Verfasst: Sa 30. Jan 2021, 04:38
von Tommy Herrmann
In der Startseite "index.html" der Skripte, die Du mir geschickt hattest, steht ja nichts weiter als der Code, den ich bereits oben am 27.01. um 16:16 gepostet hatte.

Kopiere den mal, anstelle des Beispieltextes, in einen einfachen Textblock von Mobirise - oder noch besser - in einen leeren "Custom </> HTML Block".

Weiterhin müssten dann alle anderen Dateien und Ordner in das Stammverzeichnis der lokalen Publizierung von Mobirise und dann sollte es gehen, denn Du ersetzt ja so lediglich diesen Seiten-Inhalt vom <body> aus der "index.html" in die "index.html" von Mobirise.

Es wird auch was angezeigt aber z.B. nicht die Bilder. Das hat mit der absoluten Position der einzelnen Skripte zu tun, was so in Mobirise nicht funktionieren wird - auch nicht, wenn man die JavaScripts ganz unten, also unterhalb der .js Dateien von Bootstrap platziert.

Re: Wie bekomme ich in den Header eine 360 grad Tour

Verfasst: Sa 30. Jan 2021, 08:25
von Volker
Hi Tommy,

ich hab eine Alternative gefunden, einen Block von einem 3. Anbieter :D
Ich weiß, magst Du nicht, aber kommt dem schon sehr nahe wie ich es mir vorstelle.

https://kfz-fotograf.de/001/

Re: Wie bekomme ich in den Header eine 360 grad Tour

Verfasst: Sa 30. Jan 2021, 10:10
von Tommy Herrmann
ist doch genau was Du wolltest - was hast Du da verwendet?