neueste Tutorials

CKEditor und SyntaxHighlighter 3.0.83

Da der FCKEditor nicht mehr weiter entwickelt wird und Probleme in neueren...

weiterlesen..

Link Preview mit Websnapr

  Da Websnapr den Code geändert hat ist das Snippet nicht mehr...

weiterlesen..

ColorRating als Modul (Snippet)

ColorRating, ist ein auf jQuery und PHP basierendes "Ajax 5 Sterne"...

weiterlesen..

Statistik

Besucher gesamt: 52.652
Besucher heute: 38
Besucher gestern: 67
Max. Besucher pro Tag: 144
gerade online: 0
max. online: 57
Seitenaufrufe gesamt: 355.958
Seitenaufrufe diese Seite: 6.314
expCounter Homepage

Anmeldung

Suche

Support

LiveZilla Live Help

Google+
Folgen Sie mir bei Google+

Valid XHTML 1.0 Transitional
Suchmaschinenoptimierung mit Ranking-Hits
Creative Commons License
Alle Texte und Tutorials auf websitebaker.net stehen unter einer CC 3.0 by-nc-nd Deutschland Lizenz


Website Baker und jQuery

RSS

Die ColorBox als Modul (Snippet)

von WB.net-Team am 16.12.2009, 02:00:00

 

ColorBox 0.6 ist veraltet und steht nicht mehr zum Download. Die neue Version 0.8 findet Ihr in meinem Tutorial-Blog!

 

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

 

 

 

Bewertung:
59.0
190 Stimme(n)
1 2 3 4 5



neuere Artikel:

Einbau des jQuery Plugins ColorBox A light-weight, customizable lightbox plugin for jQuery 1.3 

zurück

^