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 » WordPress » WordPress manuell: Die fancyBox Lightbox integrieren

WordPress manuell: Die fancyBox Lightbox 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
  • 9. Februar 2013

Inhaltsverzeichnis

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

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:

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, 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.

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

Logo für Opus Marketing aus Bayreuth. Links zu sehen ist eine schwarze Schachfigur, der schwarzer Turm. Daneben in Großbuchstaben die Buchstaben OPUS.

OPUS Marketing

Bayreuth

VABELHAVT

Innsbruck

4eck Media Webdesign Agentur Wahren an der Müritz.

4eck Media GmbH & Co. KG

Waren (Müritz)

Fotografie Jennifer Klüpfel

Bodenheim

werbeagentur held traunstein logo

HELD Werbeagentur

Traunstein

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.

→

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

  • (Kostenlose) Services
  • 3D-Visualisierung
  • Allgemein
  • Apps
  • Betriebliches
  • Betriebswirtschaft
  • Bilder & Vektorgrafiken bearbeiten
  • Boilerplates & andere Tools
  • Branding
  • Buchhaltung
  • CMS
  • Content Marketing
  • CSS
  • Datenschutz
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Editoren
  • Essentials
  • Fortbildung
  • Fotografie
  • Freebies
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Icons & Fonts
  • Illustrator
  • IMHO
  • Infografiken
  • Inspiration
  • Interviews
  • IT Services
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Business-News
  • Online-Marketing
  • Performance-Optimierung
  • Photoshop
  • PHP
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Amazon SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • Tutorials
  • UX Design
  • Videoproduktion
  • Virtual Reality
  • VPN
  • Webdesign
  • Website erstellen
  • WooCommerce
  • WordPress
  • WordPress Plugins
  • WordPress Themes
  • (Kostenlose) Services
  • 3D-Visualisierung
  • Allgemein
  • Apps
  • Betriebliches
  • Betriebswirtschaft
  • Bilder & Vektorgrafiken bearbeiten
  • Boilerplates & andere Tools
  • Branding
  • Buchhaltung
  • CMS
  • Content Marketing
  • CSS
  • Datenschutz
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Editoren
  • Essentials
  • Fortbildung
  • Fotografie
  • Freebies
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Icons & Fonts
  • Illustrator
  • IMHO
  • Infografiken
  • Inspiration
  • Interviews
  • IT Services
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Business-News
  • Online-Marketing
  • Performance-Optimierung
  • Photoshop
  • PHP
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Amazon SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • Tutorials
  • UX Design
  • Videoproduktion
  • Virtual Reality
  • VPN
  • Webdesign
  • Website erstellen
  • WooCommerce
  • WordPress
  • WordPress Plugins
  • WordPress Themes

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 ↑