Sie sind nicht angemeldet.

Wordpress, Panopress und Pano2VR - Probleme mit HTML5

Beltschazzar

Profi-User

  • »Beltschazzar« ist der Autor dieses Themas

Beiträge: 137

Wohnort: Esslingen

  • Nachricht senden

1

Mittwoch, 9. Januar 2013, 15:48

Wordpress, Panopress und Pano2VR - Probleme mit HTML5

Hallo Zusammen,

ich bin gerade dabei meine alte Homepage www.panofolio.de (Wordpress) wieder zu reaktivieren.
Ich würde hier gerne in Zukunft ohne großes Gefrickel Kugelpanoramen hochladen können.
Zuletzt (2010) hat das mit Flashpanormen (erzeugt durch Pano2VR) Wordpress und dem plugin "Shadowbox JS" auch funktioniert.

Nun würde ich das Ganze gerne fortsetzen, allerdings unter der Prämisse, dass die Panoramen mit HTML5 realisiert werden sollen um dann -irgendwie- in Wordpress eingebunden zu werden.
Hier fangen meine Probleme dann aber an. Ich kriege das Beispielpano mit Panopress (oberstes auf panofolio.de, ohne Vorschaubild, nur schwarzer Button) zwar einigermaßen zum Laufen, aber wirklich schön sieht die sich öffnende Box nicht aus. Außerdem wird das Ganze auf dem iPhone nicht richtig dargestellt.

Hat mir jemand vielleicht den ein oder anderen Tipp, wäre über Hilfe sehr dankbar. Hab schon den ganzen Tag mehr oder weniger erfolglos mit googeln und probieren verbracht.

Viele Grüße
Daniel

Gérard

Mega-User

Beiträge: 1 105

  • Nachricht senden

2

Mittwoch, 9. Januar 2013, 16:23

Zitat von »Beltschazzar«

... Ich kriege das Beispielpano mit Panopress (oberstes auf panofolio.de, ohne Vorschaubild, nur schwarzer Button) zwar einigermaßen zum Laufen, aber wirklich schön sieht die sich öffnende Box nicht aus. Außerdem wird das Ganze auf dem iPhone nicht richtig dargestellt.

Die bisher von dir benutzte Lightbox kann wohl leider keine HTML-Seiten öffnen, sonst wäre das wohl die Lösung gewesen. Schau dir mal die Panos auf meine hier verlinkte Site an - allerdings nicht die Startseite, da ist es ein Iframe - , ob das so was ist, wie du suchst. Das ist mit dem Easy FancyBox Plugin gemacht. Das Aussehen kann verändert werden. Das geht zwar alles auch mit Panopress, aber das hat aus meiner Sicht ein paar Probleme und generiert eine Unmenge von Code.

Gérard

Beltschazzar

Profi-User

  • »Beltschazzar« ist der Autor dieses Themas

Beiträge: 137

Wohnort: Esslingen

  • Nachricht senden

3

Mittwoch, 9. Januar 2013, 18:25

Danke Gérard für Deine schnelle Antwort.

Ich habe das empfohlene Easy FancyBox Plugin inzwischen installiert und aktiviert.
Leider sind meine Englisch- bzw. HTML-Kenntnisse nicht berauschend, so dass ich nicht weiter komme:

Ist bei den Einstellungen für das Plugin noch etwas zu verändern?
Wie binde ich letztendlich ein Pano ein? Kann ich dies "visuell" erledigen oder brauche ich dazu nen HTML-Schnipsel?
Wenn ja, kann mir jemand ein Beispiel zur Verfügung stellen?

Gruß
Daniel

Gérard

Mega-User

Beiträge: 1 105

  • Nachricht senden

4

Mittwoch, 9. Januar 2013, 19:10

Zitat von »Beltschazzar«

Ist bei den Einstellungen für das Plugin noch etwas zu verändern?
Wie binde ich letztendlich ein Pano ein? Kann ich dies "visuell" erledigen oder brauche ich dazu nen HTML-Schnipsel?

Ich mach es mir mal einfach. Hier 2 Screenshots von meinen Einstellungen unter Einstellungen>Mediathek





Und hier die Einstellungen beim Einbinden des Vorschaubildes. Da musst du auf die HTML-Datei verweisen, die dein Pano enthält. Da bei mir diese Dateien alle auf "index.html" hören, fehlt bei mir der Dateiname, den du nur brauchst wenn von index.html abweichend.



Gérard

Beltschazzar

Profi-User

  • »Beltschazzar« ist der Autor dieses Themas

Beiträge: 137

Wohnort: Esslingen

  • Nachricht senden

5

Mittwoch, 9. Januar 2013, 20:04

Hallo Gérard,

habe mich nun genau an Deine Screenshots bzw. Ausführungen gehalten.
Leider funktioniert es aber nicht.
"Normale" jpgs werden vom Plugin wie gewünscht geöffnet, das Beispielpano auf meiner website jedoch nicht (siehe oberster Beitrag)
Hast Du noch eine Idee an was das liegen kann?

Gruß Daniel

Gérard

Mega-User

Beiträge: 1 105

  • Nachricht senden

6

Mittwoch, 9. Januar 2013, 20:18

Zitat von »Beltschazzar«

Hast Du noch eine Idee an was das liegen kann?

Ja - da hab ich was vergessen. Bei den Einstellungen so wie ich sie gewählt habe wird der Link nicht mit der erforderlichen CSS-Class versehen. Ich hab dann nicht weiter nachgeforscht, sondern das einfach per Hand nachgetragen. Es fehlt da ein class="fancybox-iframe". Also in der Textansicht sollte es etwa so aussehen:

$this->cacheCode('[php]','<a class="fancybox-iframe" href="http://bretagnepanos.de/wp-content/uploads/panoramas/anse-nicolas/"><img class="alignnone size-full wp-image-281" title="Anse de St Nicolas" alt="Anse de St Nicolas" src="http://bretagnepanos.de/wp-content/uploads/2012/11/anse-nicolas_700.jpg" width="700" height="350" /></a>')

Gérard

Beltschazzar

Profi-User

  • »Beltschazzar« ist der Autor dieses Themas

Beiträge: 137

Wohnort: Esslingen

  • Nachricht senden

7

Mittwoch, 9. Januar 2013, 20:46

Oki, mit folgendem Text wird eine Box geöffnet, allerdings ist diese um einiges größer als das Pano selbst.

<a class="fancybox-iframe" href="http://www.panofolio.de/wp-content/uploads/html5-panoramen/pano_3/"><img class="alignnone size-full wp-image-181" alt="danzig_hafen_nacht_pano_full_equi.p2vr.preview" src="http://www.panofolio.de/wp-content/uploads/2013/01/danzig_hafen_nacht_pano_full_equi.p2vr.preview.jpg" width="614" height="307" /></a>

Gérard

Mega-User

Beiträge: 1 105

  • Nachricht senden

8

Mittwoch, 9. Januar 2013, 21:04

Du kannst die CSS-Class auch über die erweiterten Bildbearbeitungseinstellungen eingeben:



Gérard

Gérard

Mega-User

Beiträge: 1 105

  • Nachricht senden

9

Mittwoch, 9. Januar 2013, 21:07

Zitat von »Beltschazzar«

Oki, mit folgendem Text wird eine Box geöffnet, allerdings ist diese um einiges größer als das Pano selbst.

Auf den ersten Blick sieht es so aus, als würde eine Größenbegrenzung in der im IFRAME angezeigten HTML-Datei stehen: 1000 px x 500 px. Da sollte jeweils 100% stehen.

Gérard

Beltschazzar

Profi-User

  • »Beltschazzar« ist der Autor dieses Themas

Beiträge: 137

Wohnort: Esslingen

  • Nachricht senden

10

Mittwoch, 9. Januar 2013, 21:13

hm, Du meinst im Wordpress-backend bei Einstellungen/Medien/Fancybox/iframes ?
Da stehen bei mir zweimal 100% drin

Gérard

Mega-User

Beiträge: 1 105

  • Nachricht senden

11

Mittwoch, 9. Januar 2013, 21:18

Zitat von »Beltschazzar«

hm, Du meinst im Wordpress-backend bei Einstellungen/Medien/Fancybox/iframes ?

Die 100% sind erst mal richtig, aber die meine ich nicht. In der Datei, die im IFRAME geladen wird steht eine Größenbeschränkung mit width 1000 px und height 500 px. Diese Beschränkung sorgt für die nicht füllende Darstellung.

Gérard

Beltschazzar

Profi-User

  • »Beltschazzar« ist der Autor dieses Themas

Beiträge: 137

Wohnort: Esslingen

  • Nachricht senden

12

Mittwoch, 9. Januar 2013, 21:23

sorry, aber ich stehe wohl total auf dem Schlauch.
Welche Datei ist das? Wo finde ich die, bzw. bearbeite sie?

Gérard

Mega-User

Beiträge: 1 105

  • Nachricht senden

13

Mittwoch, 9. Januar 2013, 21:47

Wir stehen alle mal auf dem Schlauch ... vielleicht habe ich auch schlecht erklärt.

Dein Vorschaubild verlinkt auf "http://www.panofolio.de/wp-content/uploads/html5-panoramen/pano_3/". Das ist die Datei http://www.panofolio.de/wp-content/uploa…no_3/index.html. Die hast du mit Pano2VR erzeugt und mit anderen auf den Server geladen. In dieser Datei steht die Zeile <div id="container" style="width:1000px;height:500px;"> Damit wird die Ausgabegröße des Panos auf 1000 px x 500 px beschränkt und kann den IFRAME in dem die Datei geöffnet wird nicht füllen. Ändern kannst du es entweder, indem du die Datei in einem Editor änderst auf <div id="container" style="width:100%;height:100%;"> oder bereits durch entsprechende Einstellungen in Pano2VR.

Gérard

Beltschazzar

Profi-User

  • »Beltschazzar« ist der Autor dieses Themas

Beiträge: 137

Wohnort: Esslingen

  • Nachricht senden

14

Donnerstag, 10. Januar 2013, 11:29

Danke für die Erklärung.
Mit der Fensteranpassung funktioniert es nun (übrigens auch mit den anderen Plugins) Habe den fehlenden Haken bei Pano2VR gesetzt.

Leider habe ich nun folgendes Problem:
Die hochgeladenen Testpanos werden in Safari (Desktop und mobil) relativ zufriedenstellend angezeigt (wobei es hier ziemlich ruckelt),
in Firefox auf Rechner A ebenfalls O.K., auf Rechner B (ebenfalls Firefox) erscheint das Panorama jedoch verzerrt (ein sich drehender Würfel), und in Internetexplorer erscheint nur ein Standbild, dass nicht gedreht werden kann.
Eine Idee an welchen Schrauben ich drehen muss, damit es auf allen Browsern läuft?

Gérard

Mega-User

Beiträge: 1 105

  • Nachricht senden

15

Donnerstag, 10. Januar 2013, 12:49

Zitat von »Beltschazzar«

... Eine Idee an welchen Schrauben ich drehen muss, damit es auf allen Browsern läuft?

Hast du mal getestet, ob meine Panos bei dir normal funktionieren - auch auf dem IPhone? Ich konnte bisher bei den Mobiles nur mit Android testen und da war alles OK. Ansonsten läuft es bei mir selbst im IE 7 und auch auf allen aktuellen Browsern.

Deine Testreihe funktioniert bei mir zumindest im IE 7 nicht. Die anderen Browser hab ich noch nicht alle getestet (dauert bei mir ob meines Standort etwas länger).

Ich vermute die Ursache bei Pano2VR. An der Lightbox liegt es nicht.

Gérard

Beltschazzar

Profi-User

  • »Beltschazzar« ist der Autor dieses Themas

Beiträge: 137

Wohnort: Esslingen

  • Nachricht senden

16

Donnerstag, 10. Januar 2013, 14:27

Deine Panos funktionieren bei mir auf dem Desktop Rechner prima (Du meinst schon die von der domain bretagnepanos.de, oder?)
Auf dem iPhone 4 und iPhone 4S öffnet sich jedoch nur eine schwarze Box mit: "FATAL ERROR: skin/vtourskin.xml -xml parsing failed!"

Bei mir vermute ich auch die Ursache bei Pano2VR. Was benutzt Du denn?

Gruß Daniel

Gérard

Mega-User

Beiträge: 1 105

  • Nachricht senden

17

Donnerstag, 10. Januar 2013, 15:14

Zitat von »Beltschazzar«

Auf dem iPhone 4 und iPhone 4S öffnet sich jedoch nur eine schwarze Box mit: "FATAL ERROR: skin/vtourskin.xml -xml parsing failed!"

Das hab ich befürchtet - werde mich mal an die Ursachenforschung machen.

Nachtrag:
Ich hoffe, ich habe den Fehler gefunden. Da gab es in der vtourskin.xml ein doppeltes Attribut.

Zitat

Bei mir vermute ich auch die Ursache bei Pano2VR. Was benutzt Du denn?

KRPano

Gérard

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Gérard« (10. Januar 2013, 15:48)

Ähnliche Themen