KIPP+

Die ColorBox als Snippet kann im Backend unter Erweiterungen installiert werden und steht dann global im gesamten System zur Verfügung. Voraussetzung ist wieder die Einbindung von jQuery über “register_frontend_modfiles”.

Die Version 0.8 arbeitet nun mit jquery-include und die frontend.css ist dadurch weggefallen. Die alte frontend.css aus der Version 0.6 müssen Sie von Hand löschen. Das ist wichtig da sonst die CSS-Datei der ColorBox zweimal geladen würde was mitunter zu unschönen Effekten führen kann.

Auch hier gilt: Bei Berechtigungsproblemen die alte ColorBox zuerst deinstallieren und danach neu installieren!

Was ist neu?

Neu in der Version 0.8 ist die aktuellste Version 1.3.17.2 der jquery.colorbox-min.js und das automatische Schließen am Ende einer Diashow. Weiterhin ist das Snippet darauf vorbereit mit dem Frontend-Edit für Topics ab Version 0.6 zusammen zu arbeiten. Sie können also den Part mit jQuery in der Erklärung von Chio auslassen und müssen nur noch die genannten Änderungen in der Template Datei und der settings.php vornehmen.

Welche Klassen und Relationen sind hinterlegt?

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.js ganz einfach ändern. Wenn Sie die frontend.js im Backend mit dem Addon File Editor öffnen finden Sie in Zeile 10 folgenden Eintrag:

 '/modules/colorbox/1/colorbox.css':null,

Die Zahl 1 steht hier für Design 1. Es stehen 6 Design´s zur Auswahl.

Weiter tiefer ab Zeile 13 bis einschließlich Zeile 32 sehen Sie folgenden Eintrag:

var $gallery, previous, next;

        next = $.fn.colorbox.next;

        $.fn.colorbox.next = function(){
                if($gallery.index(previous) == ($gallery.length - 1)){
                        $.fn.colorbox.close();
                } else {
                        next();
                }
        };

                $gallery = $("a[rel='cslide']");

                $gallery.colorbox({onComplete: function(){
                        previous = this;
                }, onOpen: function(){
                        previous = this;
                }});

Das ist eine Neuerung in der Version 0.8 und bewirkt / soll bewirken dass sich die ColorBox am Ende einer Diashow selbstständig schließt. Es gab im Testbetrieb Konstellationen wo es Probleme beim Aufruf mit “rel=csingle” gab. Sollte es zu Problemen damit kommen kann dieser Teil bedenkenlos aus der frontend.js gelöscht werden.

Ich hoffe es funktioniert soweit alles. Feedback erwünscht.

Download
Downloaded 96 times