Multibox einbinden

**Ricks** · 30.11.2009, 11:29

Hallo,

ich versuche gerade die Multibox (http://www.phatfusion.net/multibox/) einzubinden.

Dazu habe ich das Templat fe_main um folgenden Code ergänzt:

Code:

....
<link href="plugins/multibox/multibox.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]><link rel="stylesheet" href="plugins/multibox/ie6.css" type="text/css" media="all" /><![endif]-->
<script type="text/javascript" src="plugins/multibox/mootools.js"></script>
<script type="text/javascript" src="plugins/multibox/overlay.js"></script>
<script type="text/javascript" src="plugins/multibox/multibox.js"></script>
</head>

.....

<script type="text/javascript">
var box = {};
window.addEvent('domready', function(){
box = new MultiBox('mb', {
useOverlay: true,
container: document.body,
contentColor: '#333',
showNumbers: true,
descClassName: 'multiBoxDesc',
path: 'plugins/multibox/'
});
});
</script>

</body>

</html>

Und der Aufruf der Bilddatei lautet:

Code:

<a id="mb1" class="mb" title="Bild" rel="type:gif" href="tl_files/images/image_gross.gif"><img src="tl_files/images/image_klein.gif" alt="Bild" /></a></p>
<div class="multiBoxDesc mb1">Bildunterschrift</div>

Doch es funktioniert nicht. Beim Klick landet man einfach auf der Großansicht der Bilddatei, also ohne Overlay.

Hat jemand Erfahrung mit Multibox und TL?

Ricks

**brandtmarke** · 30.11.2009, 12:41

Zitat von Ricks

Code:

....

<script type="text/javascript" src="plugins/multibox/mootools.js"></script>
.....

Bei mir gehts prinzipiell, hast Du die mootools aus dem TL Framework fürs FE rausgenommen? ich könnt mir vorstellen, dass da die mootools 1.2.1 mit der mootools 1.1 kollidiert ...

**Ricks** · 30.11.2009, 12:44

Zitat von brandtmarke

Bei mir gehts prinzipiell, hast Du die mootools aus dem TL Framework fürs FE rausgenommen? ich könnt mir vorstellen, dass da die mootools 1.2.1 mit der mootools 1.1 kollidiert ...

Ja, die habe ich rausgenommen.

Also hast Du es so eingebunden wie ich und es läuft? Das würde mir schon helfen, dann muss ich nach irgendeinem Flüchtigkeitsfehler suchen.

Ricks

**planepix** · 30.11.2009, 12:47

Spontan erinnere ich mich an ein Posting eines ähnlichen Problems; Lösung war dort die Javascript ans Ende zu setzen -> siehe folgender Beitrag.
Alternativ kommt ja mit der Release 2.8 ein anderes Script zum Einsatz, dass auch mehr Funktionen kann als bisher die Slimbox (Video, Flash, etc.)

**brandtmarke** · 30.11.2009, 12:49

Ich hab den JS Aufruf und das HTMl Snippet von Dir genommen; kontrollier nochmal die Pfade zu den Dateien

mein fe_page template hat folgendes im head bereich:

Code:

<script type="text/javascript" src="plugins/MultiBox/mootools.js"></script>
<script type="text/javascript" src="plugins/MultiBox/multibox.js"></script>
<script type="text/javascript" src="plugins/MultiBox/overlay.js"></script>
<link rel="stylesheet" type="text/css" href="plugins/MultiBox/multibox.css" />
<?php echo $this->head; ?>
<script type="text/javascript">
var box = {};
	window.addEvent('domready', function(){
		box = new MultiBox('mb', {
			useOverlay: true,
			container: document.body,
			contentColor: '#333',
			showNumbers: true,
			descClassName: 'multiBoxDesc',
			path: 'plugins/multibox/'
		});
	});
</script>

bzw. die Frontend Ausgabe:

Code:

<head>
<base href="http://localhost/test/"></base>
<title>test - TYPOlight webCMS</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index,follow" />
<link rel="stylesheet" href="system/typolight.css" type="text/css" media="screen" />
<!--[if lte IE 7]><link rel="stylesheet" href="system/iefixes.css" type="text/css" media="screen" /><![endif]-->
<link rel="stylesheet" href="plugins/slimbox/css/slimbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="plugins/MultiBox/mootools.js"></script>
<script type="text/javascript" src="plugins/MultiBox/multibox.js"></script>

<script type="text/javascript" src="plugins/MultiBox/overlay.js"></script>
<link rel="stylesheet" type="text/css" href="plugins/MultiBox/multibox.css" />
<script type="text/javascript">
var box = {};
	window.addEvent('domready', function(){
		box = new MultiBox('mb', {
			useOverlay: true,
			container: document.body,
			contentColor: '#333',
			showNumbers: true,
			descClassName: 'multiBoxDesc',
			path: 'plugins/multibox/'
		});
	});
</script>


</head>

**Ricks** · 30.11.2009, 12:52

Jetzt geht es. Habe auch die Mootool-Template-Auswahl in den Seitenlayout auf Null gesetzt. (-)

Jedoch reicht der eingeblendete Layer, der die Site abdunkelt, nicht bis zum Seitenende sondern endet irgendwo mitten unter dem eingeblendeten Bild. Die HTML-Seite ist da aber noch nicht zuende.

Hast Du noch eine Idee, woran das liegen könnte?

Danke schonmal!

Ricks

**Ricks** · 30.11.2009, 12:53

Nun geht es. War wohl ein Safari-Problem.

Danke!

**brandtmarke** · 30.11.2009, 12:57

Das Phänomen kann ich mit meiner kleinen Testversion nicht nachvollziehen; hört sich aber nach einem CSS Problem an ...

hats Du irgendwo einen Selector #Overlay in deinem CSS?
Hast Du Firebug oder die Developer Tools für Firefox?

**brandtmarke** · 30.11.2009, 13:02

Eine kurze Analyse zeigt mir folgendes:

Code:

div #Overlay
Attribute
    id = Overlay

    style = position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 2; background-color: rgb(0, 0, 0);

Elternelemente

    html

    body #top

    div #OverlayContainer

Kindelemente
    Keine

geb den Selektoren #Overlay und #OverlayContainer mal eine Sichtbare Border, also z.b.
#Overlay {border: 1px solid aqua;}
#OverlayContainer {border: 1px solid fuchsia;}