Benutzer-Werkzeuge

Webseiten-Werkzeuge


addons:modules:blackgallery:lightbox:rlightbox

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen gezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
addons:modules:blackgallery:lightbox:rlightbox [2014/05/26 18:47]
shadowcat [Schritt 3: Liste bereinigen]
addons:modules:blackgallery:lightbox:rlightbox [2014/05/26 00:00] (aktuell)
Zeile 1: Zeile 1:
-====== Lightbox hinzufügen ======+====== ​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. 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.
Zeile 7: Zeile 7:
 ===== Schritt 1: Das Plugin installieren ===== ===== Schritt 1: Das Plugin installieren =====
  
-Das Plugin wird einfach von der Herstellerseite herunter geladen. Anschließend wird es unverändert über das Admin Tool "​jQuery Plugin Manager"​ installiert.+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: Es entsteht ein Verzeichnis ''​ryrych-rlightbox2-1.1.1-0-g5d7c953''​ mit folgenden Unterverzeichnissen und Dateien:
Zeile 51: Zeile 51:
                     jquery.ui.widget.js                     jquery.ui.widget.js
                     jquery.ui.widget.min.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, 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.+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.
  
 ===== Schritt 2: Das Plugin in blackGallery hinzufügen ===== ===== Schritt 2: Das Plugin in blackGallery hinzufügen =====
Zeile 81: Zeile 83:
 Der Code zum Laden steht auf der Hersteller-Homepage. ​ Der Code zum Laden steht auf der Hersteller-Homepage. ​
  
-<​sxh ​php>PHP Code</​sxh>​+<​sxh ​js> 
 +    jQuery(function($) { 
 + $( "​.lb_flowers"​ ).rlightbox();​ 
 +    }); 
 +</​sxh>​ 
 + 
 +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. 
 + 
 +<sxh js> 
 +    jQuery(function($) { 
 + $( "​.lb_group"​ ).rlightbox();​ 
 +    }); 
 +</​sxh>​ 
 + 
 +**Fertig!** 
 + 
 +Wir brauchen in diesem Fall kein Ausgabetemplate,​ weil das Standardtemplate - das der Slimbox - paßt. 
 + 
 +===== Fazit =====
  
 +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.
addons/modules/blackgallery/lightbox/rlightbox.1401122822.txt.gz · Zuletzt geändert: 2014/05/26 00:00 (Externe Bearbeitung)