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 es unverändert über das Admin Tool „jQuery Plugin Manager“ 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
                  

Der Download beinhaltet also alles, was das Plugin benötigt: Den jQuery Core, die jQuery UI und ein 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