TYPO3

petix · Mon Aug 13, 2012 12:08 pm

Hallo,

gibt es irgendetwas zu berücksichtigen, wenn man die Flash-Pano-Dateien in TYPO3 verwenden will? Ich habe bei mehreren Kunden Probleme mit dem Einbau der Dateien, bzw. deren Programmierer können die Dateien nicht fehlerfrei einbauen. Entweder es fehlt die Auflösung oder der Fullscreen-Modus geht nicht. Nun verlangt ein Programmierer eine html-Hülle für die Einbettung. Was meint er damit?

Also, wie gebe ich die Dateien für TYPO3 ab? Ist das wirklich so schwierig? Oder hat jemand für mich eine gelungene Einbettung in eine TYPO3-Umgebung?

Viele Grüße
Petix

SebastianS · Tue Aug 14, 2012 11:56 am

Das Problem ist das die JavaScript Dateien nicht sauber im Header eingebunden werden, da TYPO3 diesen durch das eigene PAGE Object ersetzt. Da gibt es nun mehrere Wege ans Ziel, und die sind abhängig davon wie fit (du?) in TYPO3 bist und wie es am Ende aussehen soll.
- Öffne per Link ein PopUp, darin wird dann das Panorama dargestellt. Den HTML Inhalt des PopUps erhälst du ja bereits durch die pano2vr Ausgabe. Evtl. machst du ein Vorschaubild mit einem Link, wie z.B. hier. Dann kannst du auch ein Vollbild öffnen.
- Arbeitest du mit TemplaVoila? Fein, dann kannst du ja ein eigenes Seitentemplate für Panoramen erstellen und im Header sauber das JavaScript mappen.
- Verschiebe in der html Datei den dir pano2vr ausgibt den JavaScript Code in den BodyBereich und gib das den Redakteuren als HTML Inhalt. Habe ich gerade ausprobiert, das geht genauso.
Liebe Grüße
Basti

petix · Tue Aug 14, 2012 1:54 pm

Hallo Basti,

das Problem ist, dass ich null Ahnung von TYPO3 habe, die Betreuer der jeweiligen Seiten aber auch Schwierigkeiten haben, die Dateien korrekt einzupflegen! Nun wüsste ich gern, was ich denen als Tipp sagen kann, weil sie mir die Schuld für das Nichtfunktionieren in die Schuhe schieben wollen und die Kunden natürlich nicht erfreut sind, dass die Panoramen auf ihren Seiten nicht laufen. Mein Beispiel ist dieses: http://www.rost-die-badgestalter.de/3d-rundgang/

Hier ist die swf-Datei über i-frame eingebunden. Was ich gegooglet habe ist, dass das falsch ist und es über ein Inhaltselement html gemacht werden müsste. Ist das richtig?

VG
Petix

SebastianS · Tue Aug 14, 2012 2:27 pm

Hier ist die swf-Datei über i-frame eingebunden. Was ich gegooglet habe ist, dass das falsch ist und es über ein Inhaltselement html gemacht werden müsste. Ist das richtig?

Hallo Petix,
ja das wäre durchaus ein gangbarer Weg. Die .swf Datei einfach als Medienelement einbinden wird nicht funktionieren.
Das Problem auf "deiner" Seite ist das hier direkt die .swf Datei mit einem iFrame angebunden wurde, das KANN nicht funktionieren. Entweder du bindest eine html Seite per iFrame ein (stell es dir als Guckloch auf einer Seite vor, durch das du hindurch auf eine andere Seite sehen kannst), oder du integrierst dein Panorama als HTML Seitenelement. Beides wird klappen.
Liebe Grüße
Basti

SebastianS · Tue Aug 14, 2012 3:53 pm

Das wäre z.B. eine Variante des HTML Codes den du in TYPO3 für dein Panorama eingeben müsstest:

Code: Select all

   		<script type="text/javascript" src="swfobject.js">
		</script>
		<script type="text/javascript">
			// hide URL field on the iPhone/iPod touch
			function hideUrlBar() {
				
				if (window.pageYOffset==0) {
					window.scrollTo(0, 1);
					// repeat every second for slow rendering pages
					setTimeout(function() { hideUrlBar(); }, 3000);
				
				}
			}
		</script>
		<script type="text/javascript" src="pano2vr_player.js">
		</script>
		<script type="text/javascript" src="skin.js">
		</script>
		<div id="container" style="width:665px;height:450px;">
		This content requires HTML5/CSS3, WebGL, or Adobe Flash Player Version 9 or higher.
		</div>
		<script type="text/javascript">
		if (swfobject.hasFlashPlayerVersion("9.0.0")) {
			var flashvars = {};
			var params = {};
			params.quality = "high";
			params.bgcolor = "#ffffff";
			params.allowscriptaccess = "sameDomain";
			params.allowfullscreen = "true";
			var attributes = {};
			attributes.id = "pano";
			attributes.name = "pano";
			attributes.align = "middle";
			swfobject.embedSWF(
				"http://www.die-badgestalter.de/fileadmin/Mandanten/Rost/3DBad/rost.swf", "container", 
				"665", "450",
				"9.0.0", "expressInstall.swf", 
				flashvars, params, attributes);
			
		} else 
		// check for CSS3 3D transformations and WebGL
		if (ggHasHtml5Css3D() || ggHasWebGL()) {
	
			// create the panorama player with the container
			pano=new pano2vrPlayer("container");
			// add the skin object
			skin=new pano2vrSkin(pano);
			// load the configuration
			pano.readConfigUrl("tester.xml");
			// hide the URL bar on the iPhone
			hideUrlBar();
			
		}
		</script>

Das setzt allerdings voraus das du die JavaScript Dateien, die oben aufgerufen werden, auch tatsächlich auf deinem Server hast. Diese müssen dann evtl. noch hochgeladen werden. Aber beispielsweise der Fullscreen Button geht dann wieder korrekt.
Siehe auch hier, ich habe allerdings nur das erste Panorama runtergeladen.
Liebe Grüße
Basti

petix · Wed Aug 15, 2012 9:59 am

Hi Basti,

vielen Dank erst einmal für deine Mühen! Ist das letzte Beispiel denn TYPO3?

Süße Kinder übrigens, und gleich so viele

Petix

SebastianS · Wed Aug 15, 2012 9:27 pm

Lediglich die Südhausbau Webseite war ein TYPO3 Beispiel, wobei das irrelevant ist. Typo3 ist nur ein CMS wie viele andere auch. Wichtig ist das du den Kompletten Html Code den dir pano2vr ausgibt in das System bringst, sonst kann es immer zu seltsamen Fehlern führen.
Liebe Grüsse
Basti

SebastianS · Thu Aug 16, 2012 4:07 pm

Wie ich sehe hast du nun deinen iFrame hinbekommen und die Fullscreen Links funktionieren auch wie gewünscht. Wenn du nun noch die Scrollbalken entfernen würdest wäre es perfekt

Im Moment sieht dein Code so aus:

Code: Select all

<iframe src="http://www.die-badgestalter.de/fileadmin/Mandanten/Rost/3DBad/index.html" width="663" height="449" name="3D-BAD">
<p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie k&ouml;nnen die eingebettete Seite &uuml;ber den folgenden Verweis aufrufen: <a href="../../../index.htm">SELFHTML</a></p>
</iframe>

und vielleicht wäre es so schöner:

Code: Select all

<iframe src="http://www.die-badgestalter.de/fileadmin/Mandanten/Rost/3DBad/index.html" width="663" height="449" name="3D-BAD" scrolling="no" frameborder="0">
<p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie k&ouml;nnen die eingebettete Seite &uuml;ber den folgenden Verweis aufrufen: <a href="../../../index.htm">SELFHTML</a></p>
</iframe>

Das kannst du ja direkt in TYPO3 im HTML Quelltextfenster so eingeben.
Liebe Grüße
Basti

petix · Thu Aug 16, 2012 7:40 pm

Hallo Basti,

ich war das nicht, das war der Programmierer. Meinst du, wenn ich deinen Code verwende, dann geht auch der hellgelbe Rand oben und links weg? Oder wie muss ich meine index-Datei anpassen, damit kein Rand entsteht?

Viele Grüße
Petix

P.S. Habe gerade herausgefunden, wie ich die html anpassen muss. Da war etwas falsch. Melde mich, wenn ich mit dem Programmierer weiter bin.

SebastianS · Fri Aug 17, 2012 8:05 am

Ein Programmierer der von SelfHTML per Copy&Paste Code übernimmt?

petix · Fri Aug 17, 2012 10:22 am

Ich kenn ihn nicht persönlich, ich hatte eigentlich überhaupt noch keinen Kontakt mit ihm, er ist der Dienstleister, des Dienstleisters, des Dienstleisters

Ich wundere mich aber über nix mehr, die Seite hat ja sowieso schlimme Fehler…

Jetzt bekam ich eine Aufforderung, die html-Seite zu ändern, da die Größe nicht stimmt! Er kann also nicht die Zahlen verändern?

Viele Grüße
Petix

SebastianS · Fri Aug 17, 2012 10:43 am

Sollte er können, oder nicht?!
Schreib mal folgendes in die HTML Seite (ich denke Du hast diese erstellt, ja?):
/fileadmin/Mandanten/Rost/3DBad/index.html

So sieht der Header jetzt aus:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>

Und daraus machst du folgendes Code:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {margin:0; padding:0;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>

Liebe Grüße
Basti

petix · Fri Aug 17, 2012 11:28 am

Ja, genau, die index.html hatte ich schon so geändert, wegen der Ränder. Bis er das einbaut wird es aber Dienstag, weil der 1. Dienstleister heute Urlaub hat und das dann erst Montag weiterleiten kann…

Gruß
Petix

SebastianS · Fri Aug 17, 2012 11:38 am

Ist ja echt hart bei euch....

petix · Tue Aug 21, 2012 7:41 pm

aber es kommt noch ärger! Ich muss die Dateien neu zuschicken, weil er das nicht geregelt bekommt…

Wenn er also scrolling="no" frameborder="0" bei Typo3 einfügt und ich die index.html ändere:
<style type="text/css">
body {margin:0; padding:0;}
</style>
dann müssten doch die Einstellungen für Höhe und Breite gleich sein, oder? Sie sind doch jetzt nur wegen des Rahmens ungleich, oder?

Außerdem behaupten sie, dass sich eine Höhe von 500 Pixel nicht einstellen ließe, da dann Scrollbalken kommen und es auch nicht der Norm entspricht. Sagt dir das etwas?

Viele Grüße
Petix