Die ColorBox als Modul (Snippet)

Da die ColorBox ständig aktualisiert und gepflegt wird, alle möglichen Formate darstellen kann, klein und schnell ist hat sie sich zu  meinem Favorit unter den jQuery Scripten entwickelt. In einem früheren Tutorial habe ich ja schon die Einbindung in den Head des Templates erklärt jedoch wollte ich es einfacher haben.

Deshalb habe ich aus der ColorBox ein Modul (Snippet) gebaut welches Sie über das Backend installieren können und Ihnen dann systemweit zur Verfügung steht.

Voraussetzung

WB Version 2.8.x mit eingebundenem jQuery Framework

sicherer Umgang mit dem Addon File Editor

Einbindung jQuery WB 2.8.x

Ab WebsiteBaker Version 2.8.1 hat sich die Einbindung von jQuery vereinfacht. Sie können den Aufruf nun über die Funktion "register_frontend_modfiles" starten.

<?php
if (function_exists('register_frontend_modfiles')) {
        register_frontend_modfiles('css');
        register_frontend_modfiles('js');
} ?>

Diesen Aufruf in Ihrem Template ergänzen Sie wie folgt:

<?php
if (function_exists('register_frontend_modfiles')) {
        register_frontend_modfiles('css');
        register_frontend_modfiles('jquery');
        register_frontend_modfiles('js');
} ?>

Wichtig ist die Reihenfolge der Script Aufrufe.
CSS Dateien müssen als erstes geladen werden!
Der Aufruf von jQuery muss vor dem Aufruf von anderen Javascripten eingetragen werden!

Im Modul sind folgende Klassen und Relationen hinterlegt:

• csingle = Aufruf mit rel="csingle", Thumbnails als Galerie mit Vor / Zurück Button
• cfade = Aufruf mit rel="cfade",  Thumbnails als Galerie mit Vor / Zurück Button und "fade" Effekt
• cslide = Aufruf mit rel="cslide",  Thumbnails als Galerie mit Vor / Zurück Button, Slideshow mit Start-Stop
• .colorbox = Aufruf mit class="colorbox", einzelnes Thumbnail
• .youtube = Aufruf mit class="youtube", YouTube Video in der Colorbox
• .iframe = Aufruf mit class="iframe", externe Webseite in der Colorbox

Demo

Die einzelnen Parameter können in der frontend.js angepasst werden.

Ändern des Designs der ColorBox

Das Design der ColorBox können Sie in der frontend.css ganz einfach ändern. Wenn Sie die frontend.css mit dem Addon File Editor öffnen finden Sie folgende Zeile:

@import url('1/colorbox.css');

Sie können hier durch ändern der Zahl 1 das Design der ColorBox beeinflussen. Es sind insgesamt 5 Design-Vorlagen hinterlegt. Die Eingabe erfolgt jeweils als Zahl. 1 ist also Design 1, 2 ist Design 2 und so weiter bis zur Zahl 5.

Modul-Versionen vor 0.5 sollten deinstalliert werden.

Update Info Version 0.6, 26.03.2010
frontend.js um Parameter erweitert der die class picturelink der Another Image Gallery um das Attribut "rel=cslide" erweitert

Update Info Version 0.5, 27.01.2010
Da der Internet Explorer die CSS Datei nicht einwandfrei mit dem "insert" Befehl aus der frontend.js geladen hat wird sie nun über eine frontend.css geladen.
Update auf ColorBox Version 1.3.6 welche Anpassungen für jQuery 1.4.x enthält

Update Info Version 0.4, 04.01.2010
Parameter für Slideshow optimiert, Rahmen wird jetzt der Monitorgröße angepasst, Bilder werden passend in den Rahmen scaliert

Update Info Version 0.3, 16.12.2009
IE Darstellungsfehler behoben

zurück