Einbindung von extern erstelltem 360-Grad-Panoramashow

[Tapetenfabrik]

Bin absolut orientierungslos bei der Frage, wie ich die Daten in NOF 12.0 einbinden kann. Empfohlen wird vom Lieferanten der Daten IFrame zu verwenden. Auf meinem PC funktioniert es - ich rufe eine mitgelieferte html-Seite auf und diese greift auf Daten zu, die in Unterverzeichnissen liegen.
Ich muss irgendwie die Daten mit uploaden, den bei Iframe kann ich ja nur diese eine html-Seite angeben.
Anbei die Installationsempfehlung der Firma als PDF und die Html-Seite für den Start.
Hoffe dass mir jemand helfen kann.
Danke im voraus.

[nettesekel]

Hallo Tapetenfabrik und willkommen im Forum, 

(in deinem Nick fehlte das f, habe mir erlaubt das zu korrigieren)

Ein IFrame ist nicht in jedem Falle die beste Lösung, da es durchaus Geräte gibt, die IFrames nicht darstellen können...
Kannst du mal etwas konkretisieren, auf was für Daten da sonst noch zugegriffen wird? Wieviele? Welche? Liegen sie in irgendwelchen Verzeichnissen?

Laut der html-Seite müsste es Verzeichnisse mit der Beichnung 0_sv_wp3_0_all und 0_sv_wp3_ksl geben in denen css-Dateien liegen... und wahrscheinlich einiges mehr...

l.g. nettesekel

[Tapetenfabrik]

Danke für die rasche Antwort. Anbei eine Dateiliste der verwendeten Dateien und Programme.
Auch danke für die Korrektur des Nickname. Kann man den Benutzernamen auch ändern ? Dort ist es auch falsch .

[nettesekel]

Im Moment bin ich gerade auf den Handy im Netz. Wenn ich wieder vor dem PC sitze, dann helfe ich dir.

Wegen deinen Nick... Ja, das geht, aber dann setzt die Forensoftware dein Passwort zurück und schickt dir ein Neues zu. Überlegs dir, kann ich dann später auch vom PC aus machen.

[nettesekel]

Ich müsste noch wissen, ob du nach Assettyp oder nach Sitestruktur publizierst.
Wenn du nicht sicher bist... befindet sich im Ordner lokale Publizierung ein Ordner "html" mit den Unterseiten des Projekts oder liegt jede Unterseite in einem eigenen Ordner?

Würdest du mir den ganzen Kram mal zur Verfügung stellen? Dann könnte ich das vor Ort mal testweise einbauen!?

[Tapetenfabrik]

Es befindet sich im Bereich Publizieren ein Ordner "html " (kommt nach assets).

Anbei die Daten für 360Grad Panorama wie gewünscht. Habe aus Platzgründen (max. 5 MB) die Bilddaten für 2 Räume rausgelöscht. Könnten also Fehlermeldungen kommen.

Mit der Änderung des Benutzernamens und Neuvergabe Paßwort bin ich einverstanden.

Danke Dir im voraus.

[nettesekel]

So, ich habe das Teil nun mal in NOF12 eingebunden. Wie der Anbieter schon beschreibt, gibt es zwei Varianten des Einbindens. Einmal kann man einzelne Panoramas direkt in die Seite einbinden und einmal  kann man die komplette Konsole per iFrame einbinden. IFrames sind wie gesagt nicht für alle Endgeräte darstellbar, dem Code nach zu urteilen, wird dem Nutzer eines solchen Gerätes aber ein Direktlink angezeigt, über welchen er dann zu der reinen Panoramaseite gelangt.

Schau dir die zwei Möglichkeiten mal an und sage mir, welche du favorisieren würdest... und ob der Viewer auf der Startseite oder auf Unterseiten laufen soll oder auf Beidem.

https://www.nof-community.de/Userprojekte/Tapetenfabrik/index.html

[Tapetenfabrik]

Super. Ich würde gerne die Variante wählen, bei der ohne IFrame gearbeitet wird und die Anzeige auf Unterseiten läuft.
Bin gespannt wie jetzt die Lösung für meine Anwendung aussieht.

Danke auch für die Useränderung.

[nettesekel]

Der Einbau ist eigentlich verhältnismäßig einfach, ich versuche ihn mal Schritt für Schritt zu erläutern.

Zunächst benötigst du zusätzlich zu deinem NOF ein FTP-Programm wie FileZilla um die benötigten Dateien auf deinen Server laden zu können.
Falls du noch nie mit einem solchen Programm gearbeitet hast, findest du hier eine schöne Anleitung von Dada, die dir bei deinem Vorhaben helfen wird.
https://www.nof-community.de/index.php/topic,825.0.html

Wenn du deinen Panoramaviewer auf einer oder mehreren Unterseiten deines Projekts laufen lassen möchtest, dann musst du die gesamten Dateien/Verzeichnisse, die du mir zur Verfügung gestellt hast mittels besagtem FTP-Programm im Ordner "html" auf deinem Server platzieren.
Du bist im richtigen html-Ordner wenn sich in diesem Ordner auch die Unterseiten deiner Website und Dateien wie die style.css und site.css befinden.

Welche Dateien genau müssen auf den Server geladen werden?
Alle im Screenshot blau hinterlegten Dateien kopierst du in den Ordner "html".




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


Nun folgt die Einbindung in dein NOF-Projekt. Öffne die Seite deines Projekts, in der du den/die Viewer einbinden möchtest.
Füge an der Stelle, an welcher der Viewer erscheinen soll ein Textfeld ein und platziere den nachfolgenden Code im html-Code dieses Textfeldes.
Wie das geht, ist hier kurz und präzise erläutert. https://www.nof-community.de/index.php/topic,47.0.html

Diesen Code musst du nun für die einzelnen Viewer anpassen. Und zwar kannst du in der ersten Zeile die Werte für Breite (width) und Höhe (height) anpassen.

Und du musst natürlich die Pfade zur jeweiligen swf-Datei im Code editieren.
Der hier gepostete Code bindet die "raum_1.swf" in die Website ein.
Diese Datei befindet sich im Ordner "panos" deshalb lautet der Pfad "./panos/raum_1.swf"
Diesen Pfad findest du an zwei Stellen in diesem Code (im Codefenster Zeile 7 und Zeile 11) und musst ihn auch an beiden Stellen ändern sobald ein anderes Panorama angezeigt werden soll. Willst du also an einer anderen Stelle deiner Website die Datei "raum_2.swf" anzeigen lassen, so musst du den Pfad im Code für das nächste Textfeld entsprechend anpassen.

Code: HTML5

1. <div style="width:600px;height:400px;padding:1px;background-color:#000000;">
2. <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase=
3. "http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
4. width="100%" height="100%" id="SV_SWF" align="middle">
5. <param name="allowScriptAccess" value="sameDomain" />
6. <param name="allowFullScreen" value="true" />
7. <param name="movie" value="./panos/raum_1.swf" />
8. <param name="wmode" value="opaque">
9. <param name="quality" value="high" />
10. <param name="bgcolor" value="#000000" />
11. <embed src="./panos/raum_1.swf" allowfullscreen="true" quality="high" bgcolor="#000000" width="100%"
12. height="100%" wmode="opaque" name="SV_SWF" align="middle"
13. allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage=
14. "http://
15. www.adobe.com/go/getflashplayer"
16. />
17. </object>
18. </div>

Gutes Gelingen!

[Tapetenfabrik]

Habe wahrscheinlich irgendetwas falsch gemacht. Wenn ich die Seite aufrufe, kommt in dem Textfeld der Text statt die Bildanwendung.
Siehe Ergebnis über Link :
http://www.alte-tapetenfabrik.de/html/unbenannt79.html
Aus meiner Sicht habe ich alles so gemacht wie von Dir verlangt.
Mit Filezilla hochgeladen (hat geklappt s. Anlage).
An dem html-Code habe ich keine Änderung vorgenommen, da ich zunächst mit dem Raum1 testen wollte.
Kannst Du Dir das mal bitte anschauen ? Danke im voraus.

[nettesekel]

Also der Code in deiner Seite sieht schon recht merkwürdig aus. Da sind lauter Links drin, die ich nicht zuordnen kann und die dort eigentlich nichts zu suchen haben...

So sollte der Code aussehen:

Code: HTML5

1.     <div style="width:600px;height:400px;padding:1px;background-color:#000000;">
2.     <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase=
3.    "http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
4.    width="100%" height="100%" id="SV_SWF" align="middle">
5.     <param name="allowScriptAccess" value="sameDomain" />
6.     <param name="allowFullScreen" value="true" />
7.     <param name="movie" value="./panos/raum_1.swf" />
8.     <param name="wmode" value="opaque">
9.     <param name="quality" value="high" />
10.     <param name="bgcolor" value="#000000" />
11.     <embed src="./panos/raum_1.swf" allowfullscreen="true" quality="high" bgcolor="#000000" width="100%"
12.    height="100%" wmode="opaque" name="SV_SWF" align="middle"
13.    allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage=
14.    "http://
15.    www.adobe.com/go/getflashplayer"
16.    />
17.     </object>
18.     </div>

Und so sieht er aus...

Code: HTML5

1. <div <http://december.com/html/4/element/div.html> style="width:600px;height:400px;padding:1px;background-color:#000000;">
2. <object <http://december.com/html/4/element/object.html> classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase=
3. "http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0 <http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab>"
4. width="100%" height="100%" id="SV_SWF" align="middle">
5. <param <http://december.com/html/4/element/param.html> name="allowScriptAccess" value="sameDomain" />
6. <param <http://december.com/html/4/element/param.html> name="allowFullScreen" value="true" />
7. <param <http://december.com/html/4/element/param.html> name="movie" value="./panos/raum_1.swf" />
8. <param <http://december.com/html/4/element/param.html> name="wmode" value="opaque">
9. <param <http://december.com/html/4/element/param.html> name="quality" value="high" />
10. <param <http://december.com/html/4/element/param.html> name="bgcolor" value="#000000" />
11. <embed <http://december.com/html/4/element/embed.html> src="./panos/raum_1.swf" allowfullscreen="true" quality="high" bgcolor="#000000" width="100%"
12. height="100%" wmode="opaque" name="SV_SWF" align="middle"
13. allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage=
14. "http://
15. www.adobe.com/go/getflashplayer <http://www.adobe.com/go/getflashplayer>"
16. />
17. </object <http://december.com/html/4/element/object.html>>
18. </div <http://december.com/html/4/element/div.html>>

Diese ganzen

Code: HTML5

1. <http://december.com/html/4/element/...

Links haben da eigentlich nix verloren...

[Tapetenfabrik]

Besten Dank - jetzt funktioniert alles. Kompliment auch für die Art und Weise wie Du mir professionell und nachvollziehbar geholfen hast.

Eine ergänzende Frage noch. Wenn ich diese Seiten und übrigens auch die mit der NOF-Fotogalerie sind auf meinem IPAD nicht sichtbar. Kann man da etwas machen ?

[nettesekel]

Da wird es sich bei deiner Navigation wohl um die Flash-Navi handeln. Alles was mit Flash zu tun hat können die Apfel-Technik und einige andere Tablets nicht darstellen.
Was die Navi angeht könntest du auf die normale grafische Navi umstellen...

[Tapetenfabrik]

Ok - dann muss man damit leben.
Nun möchte ich auf einer Übersichtseite die komplette Konsole per iFrame einbinden. Habe es versucht, wobei ich folgendes Problem habe.
Beim Aufruf Iframe einfügen wird mir nur die Möglichkeit von Links angegeben und ich habe keine Möglichkeit (wie bei Textfeldvariante) den HTML Code reinzukopieren. Wie mache ich das ?

[nettesekel]

Da gibt es zwei Möglichkeiten.
Entweder du gehst genauso vor, wie bei der anderen Einfügung und nimmst ebenfalls ein Textfeld und fügst den Code fürs IFrame ein. Der Code macht aus dem Textfeld dann automatisch ein IFrame:

Code: HTML5

1. <iframe src="./sv_wp3_viewer.html"
2. width="990px" height="650px" name="SV_KSL" scrolling="no" frameborder="0"
3. style="border-color:#000000; border-width:1px; border-style:solid;">
4. <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen:
5. Sie können die eingebettete Seite über den folgenden Verweis
6. aufrufen: <a href=
7. "./sv_wp3_viewer.html"
8. >
9. Panorama ansehen</a></p>
10. </iframe>

Oder du nutzt die IFrame-Komponente aus NOF wie du es vermutlich schon versucht hast und gibst den Direktlink zur html-Datei an.
http://www.deineDomain.de/html/panoramadatei.html

Bei meiner Erklärung weiter oben, habe ich die html-Datei nicht mit markiert als um den upload der Dateien ging. Für die IFramevariante müsstest du auch diese Datei mit auf den Server laden.