Codeschnipsel - Multibox Multimedia Lightbox

Erstmal danke ich Samuel Birch, dass ich meine deutsche Version seines Scripts hier veröffentlichen darf.

Übersicht:

Die Multibox ist eine einfache und moderne Darstellungsweise von Multimedia-Formaten auf einer Webseite.
Es werden Bilder, Videos, MP3s sowie auch HTML-Seiten in der Lightbox dargestellt.

Funktionen:

• Unterstützt eine Reihe von verschiedenen Multimedia-Formaten
• Automatische Erkennung der Formate oder manuelle Bestimmung möglich
• Beschreibung in HTML möglich

Lizenz:

Die Multibox ist nach der Open Source Lizenz "MIT Lizenz" veröffentlicht.

Beispiel:

- Flashvideo (FLV) Beispiel (Von 20-One.de)
- MOV Beispiel
- WMV Beispiel
- Real (RM) Beispiel
- MP3 Beispiel (Von 20-one.de)
- HTML-Seite Beispiel
- HTML-Seite (Ajax)
- HTML-Inhalt über id-Attribut
- http://www.phatfusion.net

Einbindung:

Im Head-Bereich:

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

Die eigentlichen Elemente:

Code:
<a href="multibox/01.jpg" id="mb1" class="mb" title="1. Bild Titel (JPG)"><img src="multibox/kl01.jpg" alt="" border="0"  /></a>
<div class="multiBoxDesc mb1">Beschreibung des 1. Bildes (JPG) auch HTML wird unterst&uuml;tzt</div><br />
 
<a href="multibox/beispiel.flv" rel="width:400,height:300" id="mb4" class="mb" title="Movie (FLV)">Flashvideo (FLV) Beispiel</a>
<div class="multiBoxDesc mb4">Beschreibung des Flashvideo (FLV) Beispiels</div><br />
 
<a href="multibox/music.mp3" rel="" id="mb8" class="mb" title="Music">MP3 Beispiel</a>
<div class="multiBoxDesc mb8">Beschreibung des MP3 Beispiels</div><br />
 
<a href="multibox/blank.htm" rel="width:400,height:300" id="mb9" class="mb" title="iFrame HTML-Seite">HTML-Seite Beispiel</a>
<div class="multiBoxDesc mb9">Beschreibung des HTML Beispiels</div><br />
 
<a href="multibox/blank-ajax.htm" rel="width:400,height:300,ajax:true" id="mb10" class="mb" title="AJAX">HTML-Seite (Ajax)</a>
<div class="multiBoxDesc mb10">Beschreibung des HTML Beispiels (ajax)</div><br />
 
<a href="#htmlElement" rel="type:element" id="mb11" class="mb" title="HTML element">HTML-Inhalt über id-Attribut</a>
<div class="multiBoxDesc mb11">Beschreibung des HTML-Inhaltes</div><br />
<div id="htmlElement"><p>Auszug eines Codes.</p><br /><ul><li>Punkt 1</li><li>Punkt 2</li></ul></div>
 
<a href="http://www.phatfusion.net" rel="width:400,height:300" id="mb12" class="mb" title="iFrame">http://www.phatfusion.net</a>
  <div class="multiBoxDesc mb12">Iframe: http://www.phatfusion.net</div>

Konfiguration der Elemente:
Das Attribut rel ermöglicht verschiedene Parameter einem Element zuzuweisen.
Folgendes Beispiel zeigt wie man den Typ definiert:

rel="type:jpg"

Weitere Möglichkeiten für type sind:

jpg / gif / png

Element als ein Bild behandeln

swf

Eine Flashdatei

flv

Ein Flashfilm

mov

Ein Quicktime Movie

wmv

Ein Windows Media Video

rv / rm / rmvb

Real Media Format

mp3

MP3-Datei

element

Ein HTML-Element auf der Seite

Alle anderen werden standardgemäß als Iframe definiert.
Andere Optionen wären:

	rel="width:400,height:300"

ajax:true kann gesetzt werden, um den Inhalt in die Seite anstatt in das Iframe zu laden.

Im Body-Bereich nach den Elementen den "parser" einbinden:

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

Globale Parameter für den parser:

useOverlay

Benutzt einen halbtransparenten Hintergrund. Standard: false;

container

Das beinhaltene Element für den Overlay (Falls in Benutzung). Standard: document.body

contentColor

Hintergrundfarbe des Fensters. Standard: '#FFF'

showNumbers

Zeigt an: 1 von 8. Standard: true

showControls

Zeigt das Bedienfeld an. Standard: true

descClassName

Der Class-Name des Beschreibungs-Divs.

offset

Multibox um x, y verschieben. Standard: {x:0, y:0}

fixedTop

Name des Ziels, worin Multibox geöffnet werden soll.

openFromLink

Soll Multibox vom Link oder von der Bildschirmmitte aus geöffnet werden. Standard: true

path

Pfad zu den SWF-Dateien.

onOpen

Optionaler Funktionsaufruf beim öffnen

onClose

Optionaler Funktionsaufruf beim schließen

Unterstützte Browser:

• Firefox 2 (mac / pc)
• IE 7
• IE 6
• Safari (mac)

Download:

• Multibox 1.3 (Deutsch/German)

Beachten Sie:

Wir übernehmen keinerlei Haftung für irgendwelche Schäden, Ausfälle oder sonstigen Geschehnissen.
Alle Angaben sind ohne Gewähr, Sie handeln auf eigenes Risiko!
Alle genannten Soft- und Hardwarebezeichnungen sowie Markennamen sind Eigentum ihrer jeweiligen Inhaber und unterliegen im Allgemeinen warenzeichen-, marken- oder patentrechtlichem Schutz.
Alle Rechte vorbehalten