WordPress: FancyBox-Lightbox manuell in das eigene Theme integrieren

Heute beschäftigen wir uns mit der Frage, wie sich das großartige Lightbox-Plugin fancyBox for jQuery in ein WordPress-Theme integrieren lässt und zwar, ohne dafür ein eigenes WordPress-Plugin zu verwenden. Die fancyBox ist eines der populärsten jQuery Lightbox Plugins überhaupt und liegt mittlerweile in der Version 2.1.0 vor. Tolle Effekte, leichte Konfigurierbarkeit, die Möglichkeit alle gewünschten Dateiarten (HTML, iframe, Bilder, Videos) einbinden zu können und die Integration in ein WordPress-Theme unterhalb von 10 Minuten, lassen die Sehnsucht nach einem WordPress-Plugin gar nicht erst aufkommen.

Die fancyBox in ein bestehendes WordPress-Theme integrieren

Zuallererst muss das jQuery fancyBox Plugin heruntergeladen werden. Nach dem Download laden Sie die benötigten Dateien auf Ihren Webserver in die dafür vorgesehenen Ordner hoch. In meinem Fall sind dies die Ordner CSS (die gesammelten CSS-Dateien des Themes) und JS für die JavaScript Dateien. Im weiteren Verlauf dieses Artikels gehe ich von diesen beiden Ordnern als Unterverzeichnisse des eigenen Themes aus. Sind diese noch nicht vorhanden, legen Sie bitte die Ordner css und js an unter: /wp-content/themes/name_ihres_themes/. Im fancyBox Ordner finden Sie diese Dateien im Unterordner „source“.

JavaScript? Gibt hier bis zum Abwinken.

Laden Sie nun bitte folgende Dateien in den CSS-Ordner Ihres Themes:

1. blank.gif
2. fancybox_loading.gif
3. fancybox_overlay.png
4. fancybox_sprite.png
5. jquery.fancybox.css

Als nächstes bitte folgende Dateien in den JS-Ordner auf dem Webserver hochladen:

• jquery.fancybox.js
• jquery.mousewheel-3.0.6.pack.js

Hilfsfunktionen und Aufruf erstellen

Nun erstellen Sie mit einem reinen Texteditor (z.B. Notepad für Windows) eine leere Datei namens „initialize.js“ und öffnen diese. In diese eben erstellte Datei fügen wir den Aufruf der fancyBox und eine kleine Hilfsfunktion ein, die dazu dient, den Bildern und WordPress-Gallerien die nötigen Klassen zum Aufruf der fancyBox zu geben. Fügen Sie also folgendes in die initialize.js ein:

// fancyBox Hilfsfunktion, versieht die Bildlinks und Gallerien mit den geforderten Attributen.
 jQuery.noConflict();
 jQuery(function(){
 jQuery.fn.getTitle = function() {
 var arr = jQuery("a.fancybox");
 jQuery.each(arr, function() {
 var title = jQuery(this).children("img").attr("title");
 jQuery(this).attr('title',title);
    })
 }
// Supported file extensions
 var thumbnails = 'a:has(img)[href$=".bmp"],a:has(img)[href$=".gif"],a:has(img)[href$=".jpg"],a:has(img)[href$=".jpeg"],a:has(img)[href$=".png"],a:has(img)[href$=".BMP"],a:has(img)[href$=".GIF"],a:has(img)[href$=".JPG"],a:has(img)[href$=".JPEG"],a:has(img)[href$=".PNG"]';
jQuery(thumbnails).addClass("fancybox").attr("rel","fancybox").getTitle();
});
// Wir starten die fancyBox
 jQuery(document).ready(function() {
 jQuery(".fancybox").fancybox();
 });

Laden Sie die initialize.js nun ebenfalls in den Ordner js Ihres Themes hoch. Nun bleibt uns nur noch das Verlinken der benötigten Dateien im Header des Themes. Das erfolgt nun nicht in der header.php des betreffenden WordPress Themes, sondern erfolgt korrekt und vorschriftsgemäß in der functions.php des Themes (/wp-content/themes/Ihr Theme/functions.php). Öffnen Sie also die functions.php mit einem Texteditor oder einer Entwicklungsumgebung Ihrer Wahl und fügen folgende Codezeilen ein:

// Fügt die benötigten JavaScript-Dateien in die header.php ein
 wp_register_script(
 'fancyBox',
 get_template_directory_uri('template_directory') . '/js/jquery.fancybox.js?v=2.1.0',
 array('jquery') );
 wp_enqueue_script('fancyBox');

wp_register_script(
 'mousewheel',
 get_template_directory_uri('template_directory') . '/js/jquery.mousewheel-3.0.6.pack.js',
 array('jquery') );
 wp_enqueue_script('mousewheel');

wp_register_script(
 'initialize',
 get_template_directory_uri('template_directory') . '/js/initialize.js',
 array('jquery') );
 wp_enqueue_script('initialize');

// Fügt das benötigte Stylesheet in die header.php ein
 wp_enqueue_style(
 'fancyBox_css',
 get_template_directory_uri() . '/css/jquery.fancybox.css?v=2.1.0');

Fertig ist die Integration der fancyBox! Diese tolle Lightbox wird nun jedes Bild wunderbar öffnen, wichtig ist nur beim Einfügen der Bilder in den Editor, dass auf das jeweilige Bild gelinkt wird. Galerien werden nun ebenfalls mit der fancyBox anschaubar, wenn man folgende Einstellung nutzt:

Fazit: Einfach und schnell haben wir nun die erstklassige fancyBox in ein bestehendes WordPress-Theme integriert. Die fancyBox bietet noch weitere, vielfältige Möglichkeiten der Modifizierung oder Konfiguration. Für weitere Informationen und Konfigurationsmöglichkeiten besuchen Sie bitte die Webseite zu fancyBox.

(dpe)