Andere Lightbox hinzufügen

Wir gehen jetzt mal von ungünstigsten Fall aus: Wir haben ein Lightbox-Plugin, dessen Struktur nicht wirklich zu der eines üblichen jQuery Plugins in BlackCat CMS paßt, und wir wollen dieses Plugin als Lightbox verwenden.

Für dieses Beispiel verwenden wir „rlightbox“: https://ryrych.github.io/rlightbox2/

Das Plugin wird einfach von der Herstellerseite herunter geladen. Anschließend wird das ZIP unverändert über das Admin Tool „jQuery Plugin Manager“ hochgeladen und installiert.

Es entsteht ein Verzeichnis ryrych-rlightbox2-1.1.1-0-g5d7c953 mit folgenden Unterverzeichnissen und Dateien:

  \---ryrych-rlightbox2-0d6655a
      |   .gitignore
      |
      \---widget
          +---css
          |   |   error_bg.png
          |   |   error_sign.png
          |   |   lightbox.css
          |   |   lightbox.min.css
          |   |   loader.gif
          |   |   panorama.png
          |   |
          |   \---ui-lightness
          |       |   jquery-ui-1.8.16.custom.css
          |       |
          |       \---images
          |               ui-bg_diagonals-thick_18_b81900_40x40.png
          |               ui-bg_diagonals-thick_20_666666_40x40.png
          |               ui-bg_flat_10_000000_40x100.png
          |               ui-bg_glass_100_f6f6f6_1x400.png
          |               ui-bg_glass_100_fdf5ce_1x400.png
          |               ui-bg_glass_65_ffffff_1x400.png
          |               ui-bg_gloss-wave_35_f6a828_500x100.png
          |               ui-bg_highlight-soft_100_eeeeee_1x100.png
          |               ui-bg_highlight-soft_75_ffe45c_1x100.png
          |               ui-icons_222222_256x240.png
          |               ui-icons_228ef1_256x240.png
          |               ui-icons_ef8c08_256x240.png
          |               ui-icons_ffd27a_256x240.png
          |               ui-icons_ffffff_256x240.png
          |
          \---lib
                  jquery-1.6.4.js
                  jquery-1.6.4.min.js
                  jquery.ui.core.js
                  jquery.ui.core.min.js
                  jquery.ui.rlightbox.js
                  jquery.ui.rlightbox.min.js
                  jquery.ui.widget.js
                  jquery.ui.widget.min.js

(Stand 26.05.2014, bei späterem Download können Verzeichnisname und Inhalt abweichen.)

Der Download beinhaltet also alles, was das Plugin benötigt: Den jQuery Core (jquery-1.6.4[.min].js), die jQuery UI (jquery.ui.core[.min].js, jquery.ui.widget[.min].js) und ein UI Theme. Die erste Herausforderung besteht also darin zu erkennen, welche Dateien wirklich geladen werden müssen, und welche überflüssig sind.

Um das neu installierte Plugin hinzuzufügen, wechseln wir auf die blackGallery Seite und dort auf den Reiter [Lightbox]. Hier findet sich rechts eine Schaltfläche [jQuery Plugin hinzufügen]. Wird diese angeklickt, öffnet sich ein Dialog mit allen installierten jQuery Plugins. Aus dieser Liste wählen wir nun das soeben frisch installierte ryrych-rlightbox2-1.1.1-0-g5d7c953.

Es werden nun automatisch alle Dateien mit den Endungen *.js und *.css ermittelt und der Liste hinzugefügt.

Wir brauchen nur eine Handvoll der nun aufgelisteten Dateien:

• jquery.ui.rlightbox[.min].js
• lightbox[.min].css
• jquery-ui-1.8.16.custom.css

Bei den beiden erstgenannten ist es im Prinzip egal, ob die minimierte oder die nicht minimierte Version verwendet wird. (Also mit oder ohne .min im Namen.) Allerdings geht das Laden der minimierten Version schneller, daher wird man bevorzugt diese verwenden.

Alle anderen Dateien werden also nun durch Anklicken des [-]-Symbols neben dem Eintrag entfernt.

Der Code zum Laden steht auf der Hersteller-Homepage.

    jQuery(function($) {
	$( ".lb_flowers" ).rlightbox();
    });

Wir können den Namen der CSS-Klasse, die hier als Selektor verwendet wird, aber problemlos anpassen. Wir nehmen statt dessen lb_group, weil das der gleiche Selektor ist wie bei der Slimbox.

    jQuery(function($) {
	$( ".lb_group" ).rlightbox();
    });

Fertig!

Wir brauchen in diesem Fall kein Ausgabetemplate, weil das Standardtemplate - das der Slimbox - paßt.

Das Plugin wurde unverändert vom Hersteller übernommen, obwohl die Verzeichnisstruktur nicht zur Standard-Struktur von BlackCat CMS paßt. Das ist aber kein Problem, weil *.js und *.css-Dateien innerhalb der ersten 5 Verzeichnisebenen gefunden werden. Durch das Aussortieren der überflüssigen Dateien wird genau das geladen, was die blackGallery braucht. Im Frontend sollte die Galerie also jetzt auf Anhieb funktionieren, vorausgesetzt, sie hat vorher mit der Slimbox auch funktioniert.