Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » Tipps, Tricks & Tutorials » WordPress: FancyBox-Lightbox manuell in das eigene Theme integrieren

WordPress: FancyBox-Lightbox manuell in das eigene Theme integrieren

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Keine Kommentare
Lesedauer: 3 Minuten
  • von Dr. Web Redaktion
  • 20. September 2012

Inhaltsverzeichnis

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-Lightbox in ein WordPress Theme integrieren

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:

Die benötigten Einstellungen der fancyBox für eine WordPress-Gallerie

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)

Dr. Web Redaktion

Dr. Web Redaktion

An einem „Dr. Web Redaktion“ Artikel arbeiten i.d.R. mehrere Autoren, unter anderem Michael Dobler, und Markus Seyfferth.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

werbeagentur held traunstein logo

HELD Werbeagentur

Traunstein

Dunkel Design | Webdesign Grafikdesign Logodesign

Köln

Logo der Agentur Tawec Digital Services in Schorndorf.

TAWEC Digital Services

Schorndorf

Homepage Hexxer Logo der Webdesign Agentur aus Balingen.

HOMEPAGE HEXXER

Balingen

Khoa Nguyen SEO München Logo

Khoa Nguyen – Online Marketing Freelancer

München

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Digitalagentur finden

Wir unterstützen Sie bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur finden

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Foto der Inhaberin einer Social Media Agentur, umrahmt von einem Laptop und zur Linken zwei Bewertungen der Agentur.
WordPress

WordPress Agentur finden

Wir unterstützen Sie bei der Auswahl Ihrer WordPress Agentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→

0 Antworten zu „WordPress: FancyBox-Lightbox manuell in das eigene Theme integrieren“
— was ist Deine Meinung?

  1. kosta sagt:
    11. März 2014 um 8:10 Uhr

    Toller Tip, einfach nur gut

    Antworten
  2. Daniel sagt:
    19. August 2013 um 13:54 Uhr

    Danke für dieses Tutorial!

    Innerhalb von 2 Minuten durchgearbeitet, umgesetzt und begeisert.

    Antworten
  3. Juliet sagt:
    25. Mai 2013 um 12:04 Uhr

    Danke Dir, das funktioniert großartig und völlig problemlos!

    Antworten
  4. Mattie sagt:
    9. Mai 2013 um 3:36 Uhr

    Wegen dem Maulwurf im Garten verliere ich nochmal meine letzten paar Haare.

    Möglicherweise klappts ja mit den Tipps. ! Herzlichen Dank ausgesprochen

    Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑