WordPress manuell: Die fancyBox Lightbox integrieren

Heute beschäftigen wir uns mit der Frage, wie sich das großartige fancyBox jQuery Lightbox Plugin in ein WordPress Theme integrieren lässt. 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 ein WordPress Plugin in Vergessenheit geraten.

Die fancyBox in ein bestehendes WordPress Theme integrieren

Zuallererst muss das jQuery fancyBox Plugin downgeloaded 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 Theme-Ordnern aus, sind keine vorhanden, legen Sie bitte die Ordner css und js an unter: /wp-content/themes/Ihr Theme. Im downgeloadeten fancyBox Ordner finden Sie diese Dateien im Unterordner „source“.

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 bei 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, 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 js Ordner Ihres Themes hoch. Nun bleibt uns nur noch das Verlinken der benötigten Dateien im Header des Themes. Das erfolgt nun nicht hartgecoded in die header.php geschrieben) 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. Gallerien 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, fast unzählige Möglichkeiten der Modifizierung oder Konfiguration – zuviel, um es hier im diesem Artikel vorzustellen. Für weitere Informationen oder Konfigurationsmöglichkeiten besuchen Sie bitte die Webseite der fancyBox.