Hallo!
Habe jetzt endlich mal wieder Zeit gefunden, mich weiter mit der Thematik zu beschäftigen!
Ich habe jetzt besagten XML Flash Rotator heruntergeladen, und versucht in typolight einzubinden. Das ist allerdings schwieriger als gedacht. In dem heruntergeladenen Flash Rotator Paket befindet sich auch eine statische HTML-Datei. Ich habe nun die Ordnerstruktur in das plugin-Verzeichnis von typolight hochgeladen (plugins/deploy). Allerdings scheitere ich im Moment noch an der Einbindung des Flash-Films! Hier ist der Quellcode der statischen Seite, mit der die Anzeige des Flash Films schon funktioniert:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>XML Banner Rotator</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/swfobject.js"></script>
</head>
<body>
<script type="text/javascript">
// PARAMS
var params = {};
params.bgcolor = "#FFFFFF";
params.menu = "false";
params.scale = 'noScale';
params.wmode = "opaque";
params.allowScriptAccess = "always";
// ATTRIBUTES
var attributes = {};
attributes.id = 'FlabellComponent';
attributes.name = 'FlabellComponent'
// JAVASCRIPT VARS
// cache buster
var cacheBuster = Date.parse(new Date());
// stage dimensions
var stageW = 560;
var stageH = 374;
/** FLASH VARS **/
var flashvars = {};
// component dimensions inside the SWF file
flashvars.componentWidth = 560;
flashvars.componentHeight = 374;
// path to files (can be "")
flashvars.pathToFiles = "banner/";
// path to content XML
flashvars.xmlPath = "xml/banner.xml";
/** EMBED THE SWF**/
swfobject.embedSWF('preview.swf', 'FlabellComponent', stageW, stageH, '9.0.45', 'js/expressinstall.swf', flashvars, params, attributes);
</script>
<style type="text/css">
/* hide from ie on mac \*/
html, body {
height: 100%;
overflow: hidden;
}
/* end hide */
body {
background: #000000;
font: 86% Arial, "Helvetica Neue", sans-serif;
margin-top: 200px;
text-align : center;
}
</style>
<div id="FlabellComponent" style="width:100%;height:100%;">
<p>In order to view this page you need Flash Player 9+ support!</p>
<p>
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
</p>
</div>
</body>
</html>
Mein Ansatz wäre nun gewesen, zu aller erst die "swfobject.js" Datei in den Header-Bereich des verwendeten Seitenlayouts einzufügen:
Code:
<script type="text/javascript" src="plugins/deploy/js/swfobject.js"></script>
Nun hätte ich mit dem Modul "eigener HTML-Code" den folgenden Teil der statischen HTML-Seite übernommen:
Code:
<script type="text/javascript">
// PARAMS
var params = {};
params.bgcolor = "#FFFFFF";
params.menu = "false";
params.scale = 'noScale';
params.wmode = "opaque";
params.allowScriptAccess = "always";
// ATTRIBUTES
var attributes = {};
attributes.id = 'FlabellComponent';
attributes.name = 'FlabellComponent'
// JAVASCRIPT VARS
// cache buster
var cacheBuster = Date.parse(new Date());
// stage dimensions
var stageW = 560;
var stageH = 374;
/** FLASH VARS **/
var flashvars = {};
// component dimensions inside the SWF file
flashvars.componentWidth = 560;
flashvars.componentHeight = 374;
// path to files (can be "")
flashvars.pathToFiles = "banner/";
// path to content XML
flashvars.xmlPath = "xml/banner.xml";
/** EMBED THE SWF**/
swfobject.embedSWF('preview.swf', 'FlabellComponent', stageW, stageH, '9.0.45', 'js/expressinstall.swf', flashvars, params, attributes);
</script>
<style type="text/css">
/* hide from ie on mac \*/
html, body {
height: 100%;
overflow: hidden;
}
/* end hide */
body {
background: #000000;
font: 86% Arial, "Helvetica Neue", sans-serif;
margin-top: 200px;
text-align : center;
}
</style>
<div id="FlabellComponent" style="width:100%;height:100%;">
<p>In order to view this page you need Flash Player 9+ support!</p>
<p>
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
</p>
</div>
Leider funktioniert das so aber nicht, da ja bekanntlich einige Tags (z.B. der <script>-Tag) aus Sicherheitsgründen deaktiviert sind im Modul "eigener HTML-Code". Habt ihr eine Idee, wie ich diesen Flash Rotator nun eingebunden bekomme?
Vielen Dank im Voraus für Eure Hilfe!
EDIT:
Ich habe gerade gesehen, dass wohl auch noch einige Links im Quellcode abgeändert werden müssen, da die Dateien ja nicht im Root-Verzeichnis von typolight liegen, sondern unter plugins/deploy!
Statt
Code:
swfobject.embedSWF('preview.swf', 'FlabellComponent', stageW, stageH, '9.0.45', 'js/expressinstall.swf', flashvars, params, attributes);
müsste es also z.B. folgendermaßen heißen:
Code:
swfobject.embedSWF('plugins/deploy/preview.swf', 'FlabellComponent', stageW, stageH, '9.0.45', 'plugins/deploy/js/expressinstall.swf', flashvars, params, attributes);
Image Rotator auf Startseite, einbinden von Artikelteasern (wie bei XML Imagerotator)
Lesezeichen