Mediabox von iaian7.com mit WordPress verwenden
2. Juli 2009 
von Dominik
Ich nutze auf meinem Blog die Mediabox zur Anzeige meiner Bilder und Videos. Die Vorlage dafür habe ich von iaian7.com. Bis ich die Mediabox zum laufen bekommen habe, habe ich bestimmt 1 Woche benötigt. Die Seite ist komplett in Englisch und das ist bei mir leider etwas eingerostet. Am Ende habe ich es zwar hinbekommen aber das Design gefällt mir noch immer nicht. Mein Blog ist ja eigentlich sehr hell gehalten, die Mediabox ist jedoch komplett in schwarz. Sicher kann man das ändern. Nur soweit habe ich mich dann nicht mehr getraut. Warum ich diesen Artikel schreibe? Ganz einfach. Ich möchte anderen Bloggern dieses Leid ersparen. Daher werde ich mich mal ein bisschen eingehender damit Beschäftigen. Ich habe gestern eine Email von einem Blogger erhalten der ebenfalls damit Probleme hat. Diese Tatsache hat mich dazu bewegt etwas dagegen zu unternehmen. Ich werde die Installation soweit mir das gelingt auf deutsch übersetzten und Vorlagen anbieten die man nur noch in die entsprechenden Seiten integrieren muss. Aber ich würde sagen starten wir mal einfach mit unserem Projekt Mediabox goes Germany…
UPDATE: Sollte es nicht klappen mit dem Einrichten, dürft Ihr mich gerne kontaktieren!!!
Um erst einmal zu zeigen was ich genau mit “Mediabox” meine, hier mal ein Beispiel. Die Bilder zum testen einfach anklicken:
 |
|
| mit der Mediabox | ohne die Mediabox |
Das tolle an der “Mediabox Advance” ist, das es nicht nur Bilder mit diesem tollen Effekt zeigen kann, sondern auch Videos. Unterstützt wird untern anderem YouTube, Google Video und viele andere, dazu später mehr…
Die Mediabox nutzt die “mootools” javascript library. Was für euch nicht weiter wichtig ist. Wer aber genau wissen möchte was das genau ist darf sich das hier gerne durchlesen 
Zuerst ladet Ihr euch folgende Datei hier herunter.
Dann geht ihr in eure WordPress Administration (Ich nutze übrigens WordPress 2.8 DE-Editon).
Dort wählt ihr den Punkt “Design” (kann je nach WordPress Version auch mal anders benannt sein)
Jetzt klickt ihr auf “Editor”
Dort könnt Ihr rechts jetzt mehrere Dateien eures Themes auswählen und diese Bearbeiten.
Für die Mediabox sind nur zwei wichtig. Die “header.php” und “style.css”.
Als erstes wählt ihr dann die header.php und gibt folgenden Code am Ende ein:
<script src=”http://deine_url/mediabox/js/mediaboxadv134b.js” type=”text/javascript”></script>
wichtig ist, das er zwischen <head> und </head> (falls Vorhanden; das kommt immer auf das Theme an!) bzw. am Ende eingegeben wird, da der Code sonst nicht funktioniert.
Dann öffnet Ihr die style.css. Dort gibt Ihr folgenden Code am Ende der Datei ein:
/* version 2.1 – August 2010 */
/* for mediaboxAdvanced v.1.3.1 *//* Overlay background styling */
#mbOverlay {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
cursor: pointer;
}
/* Legacy fix for older browsers */
#mbOverlay.mbOverlayFF {
background: transparent url(/images/80.png) repeat;
}
#mbOverlay.mbOverlayIE {
position: absolute;
}
/* Overlay panel styling */
#mbCenter {
position: absolute;
z-index: 9999;
left: 50%;
overflow: hidden;
background-color: #000;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 5px 20px rgba(0,0,0,0.50);
-khtml-box-shadow: 0px 5px 20px rgba(0,0,0,0.50);
-moz-box-shadow: 0px 5px 20px rgba(0,0,0,0.50);
box-shadow: 0px 5px 20px rgba(0,0,0,0.50);
/* For IE 8 */
-ms-filter: “progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color=’#000000′)”;
/* For IE 5.5 – 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color=’#000000′);
}
#mbCenter.mbLoading {
background: #000 url(/images/loading.gif) no-repeat center;
/* This style is applied only during animation. */
/* For example, the next lines turn off shadows */
/* improving browser performance on slow systems. */
/* To leave shadows on, just remove the following: */
-webkit-box-shadow: none;
-khtml-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#mbImage {
position: relative;
left: 0;
top: 0;
/* Inline content styling */
font-family: Myriad, Verdana, Arial, Helvetica, sans-serif;
line-height: 20px;
font-size: 12px;
color: #fff;
text-align: left;
background-position: center center;
background-repeat: no-repeat;
padding: 10px;
}
/* Title, Caption and Button styling */
#mbBottom {
min-height: 20px;
font-family: Myriad, Verdana, Arial, Helvetica, sans-serif;
line-height: 20px;
font-size: 12px;
color: #999;
text-align: left;
padding: 0 10px 10px;
}
#mbTitle, #mbPrevLink, #mbNextLink, #mbCloseLink {
display: inline;
color: #fff;
font-weight: bold;
line-height: 20px;
font-size: 12px;
}
#mbNumber {
display: inline;
color: #999;
line-height: 14px;
font-size: 10px;
margin: auto 10px;
}
#mbCaption {
display: block;
color: #999;
line-height: 14px;
font-size: 10px;
}
#mbPrevLink, #mbNextLink, #mbCloseLink {
float: right;
outline: none;
margin: 0 0 0 10px;
font-weight: normal;
}
#mbPrevLink b, #mbNextLink b, #mbCloseLink b {
color: #eee;
font-weight: bold;
text-decoration: underline;
}
#mbPrevLink big, #mbNextLink big, #mbCloseLink big {
color: #eee;
font-size: 16px;
line-height: 14px;
font-weight: bold;
}
#mbBottom a, #mbBottom a:link, #mbBottom a:visited { /* Thanks to Danny Jung for feedback and corrections */
text-decoration: none;
color: #ddd;
}
#mbBottom a:hover, #mbBottom a:active {
text-decoration: underline;
color: #fff;
}
/* Error message styling */
#mbError {
position: relative;
font-family: Myriad, Verdana, Arial, Helvetica, sans-serif;
line-height: 20px;
font-size: 12px;
color: #fff;
text-align: center;
border: 10px solid #700;
padding: 10px 10px 10px;
margin: 20px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#mbError a, #mbError a:link, #mbError a:visited, #mbError a:hover, #mbError a:active {
color: #d00;
font-weight: bold;
text-decoration: underline;
}
Hier muss übrigens nichts geändert werden! Die Style.css muss nicht geändert werden. Es sei denn Ihr habt eine andere Ordnerstruktur. Aber auch dann darf die Adresse nicht mit “http://” anfangen. Immer nur mit einem “/” und dem ersten Ordner auf dem FTP in dem sich die Mediabox Dateien befinden. Deshalb empfehle ich auch den Mediabox Ordner direkt in das Hauptverzeichnis zu kopieren!
Jetzt entpackt Ihr die von mir heruntergeladene Datei und kopiert diese via FTP auf euren Webspace (Speicherort eures Blogs). Wichtig dabei ist,das ihr auf keinen Fall einen Unterordner wählt bzw. extra einen erstellt. Einfach in das “Root Verzeichnis” (Hauptverzeichnis).
Jetzt sollte das ganze eigentlich schon funktionieren!!!
Immer wenn Ihr jetzt ein Bild oder Video in eure Artikel einfügt müsst ihr folgen Codeschnipsel in euren Linkcode dazufügen:
Die Position für den Codeschnipsel ist direkt vor “href”.
Anmerkungen:
Ich habe auf einem Testblog einen Artikel veröffentlicht, wo ihr euch das genau ansehen könnt.
Der Testblog läuft auf dem Funpic.de Hoster. Ich habe bemerkt, dass es grundsätzlich etwas dauert, bis die Bilder sich richtig öffnen, daher empfehle ich einen Bezahlhoster wie z.B. “strato.de” oder “all-inkl.com” zu nutzten. Das war auch der Grund, das ich gewechselt habe!
ich empfehle euch die von mir verwendetet Codes (aus der header.php.txt und style.css.txt) zu nutzen und diese in header.php und style.css zu intigrieren. Dann seit ihr auf der sicheren Seite.
Der entpackte Ordner sollte folgende Struktur im FTP Server aufweisen:
Das ist wichtig das die Ordner so strukturiert sind, da sonst die Dateien von den Scripts (Codes) nicht gefunden werden.
Aus gegebenem Anlass habe ich diesen Artikel bzw. dieses Tutorial sehr schnell geschrieben und veröffentlicht. Daher werden wahrscheinlich jede Menge Schreibfehler vorhanden sein. Es kann auch sein, dass ich was wichtiges vergessen habe. Macht mich einfach darauf aufmerksam und ich werde das sofort korrigieren.
Ich werde in einem weiterem Artikel noch weiter auf das Thema wie man Videos mit der Mediabox öffnen kann und wie man den Effekt mit der Nextgen Gallery nutzen kann eingehen.
Bei Problem dürft Ihr mich natürlich jeder Zeit kontaktieren.
Weiterführender Artikel: Mediabox von iaian7.com mit WordPress verwenden – Teil 2
Schlagworte: Bilder, Gallery, iaian7, Lightbox, Mediabox, mediaboxadvanced, Nextgen, Tutorial, Videos
14. Juli 2009 um 22:51 Uhr
super geschrieben, vielen dank für deine mühe
best
g
14. Juli 2009 um 23:21 Uhr
danke sehr, war auch viel Arbeit…
10. Dezember 2009 um 09:09 Uhr
Hi, grundsätzlich ja wirklich eine tolle Arbeit – leider stellte ich am Ende fest, dass die js Datein allesamt veraltet ist. Zusätzlich ist zumindest unter WP 2.8.6 das Einfügen des CSS-Codes nicht zwingend erforderlich.
Was ich prima fände, wenn Du mir sagen könntest, welche der ganzen Dateien 100% gebracht werden … und: müssen alle Datein entsprechend ihrer Endungen zusammen gelegt werden – also alle swf für sich und alle js für sich? Und eben: WIrklich alle?
Du hörst schon, ich bin alles andere als ein Fachmann und frimel mich so durch.
Nochmals Danke für Deine gute Vorarbeit. Wenn ich bedenke wieviel Stunden ich damit zugebracht habe – jetzt läufts: Stunden verloren, weil ich inside der mediaboxAdv-1.1.7.js in Sachen Nonverblaster “true” stehen hatte – und ich das erst kurz vor Mitternacht realisierte. Immer wieder diese Fußangeln …
Kannst Du mir dennoch ein kleines Stück über das stürmische Gewässer helfen …
Danke und schönen Tag wünscht
Christian Schuster
3. Juli 2010 um 17:39 Uhr
Salu Dominik!
Das Käfervideo ist zum Schreien lustig!
So, habe Dein Manual befolgt, alles doppelt gecheckt, nur deine_url angepasst (nicht die url Stellen in dem style.css ersetzt!), den Tippfehler “” vebessert: es ist die 122er Version, die Du in Deinem Download anbietest.
Aber: bei meinem WP 2.9.2 passiert schlichtweg garnichts, weder bei der nextgen Gallery noch bei einem Testschnippsel a la
Um Hinweise für ein troubleshooting wäre ich total froh, vielen Dank!
Sebastian
4. Juli 2010 um 18:46 Uhr
schick mir per email doch mal text kopien von deiner header-php und style.php und vielleicht einen screenshot deiner ordner im webspace (ftp).
Dann helfe ich dir weiter
4. September 2011 um 12:43 Uhr
Hi Dominik,
danke für dein Tutorial.
weißt du wie man die description des Bilders unterhalb des Bildes angezeigt bekommt? 1/2 finde ich ein bisschen wenig
4. September 2011 um 19:37 Uhr
Ich weiß leider nicht genau was du meinst!