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:

Beschreibung des 1. Bildes (JPG) auch HTML wird unterstützt
Beschreibung des 2. Bildes (PNG) auch HTML wird unterstützt!
Beschreibung des 3. Bildes (GIF) auch HTML wird unterstützt!

- Flashvideo (FLV) Beispiel (Von 20-One.de)
Take my breath away (Von 20-one.de)

- MOV Beispiel
Beschreibung des MOV Beispiels

- WMV Beispiel
Beschreibung des WMV Beispiels

- Real (RM) Beispiel
Beschreibung des Real (RM) Beispiels

- MP3 Beispiel (Von 20-one.de)
Get Electrified (80s Mix) von 20-one.de

- HTML-Seite Beispiel
Beschreibung des HTML Beispiels

- HTML-Seite (Ajax)
Beschreibung des HTML Beispiels (ajax)

- HTML-Inhalt über id-Attribut
Beschreibung des HTML-Inhaltes

Auszug eines Codes.


  • Punkt 1
  • Punkt 2
- http://www.phatfusion.net
Iframe: 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:


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