Zum Inhalt wechseln
dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.
  • Beste Agentur finden
    • 3D Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online Marketing Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt
Menü
  • Beste Agentur finden
    • 3D Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online Marketing Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt

< dr. web > » WordPress » WordPress manuell: Die fancyBox Lightbox integrieren

WordPress manuell: Die fancyBox Lightbox integrieren

  • Aktualisiert am 18. April 2023
  • Markus Seyfferth von Markus Seyfferth
  • WordPress
  •  

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:

Es kam zu einen Fehler. Wahrscheinlich ist das unsere Schuld. Schreiben Sie uns gerne an hallo@drweb.de
✓ Sie haben sich erfolgreich zum Dr. Web Newsletter angemeldet

Dr. Web Newsletter

Tipps, Tricks, Tools und Ratgeber. Einmal im Monat frisch gedruckt in deinem Mail-Postfach.
  • 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.

Markus Seyfferth

Markus Seyfferth

ist seit 2019 Geschäftsführer & WordPress-Entwickler bei Dr. Web. Zuvor war er sechs Jahre lang Vorstand des Smashing Magazine, im Rahmen dessen er u.a. das Online-Marketing, die Betreuung der Werbekunden sowie diverse Online-Projekte geleitet hat.

Inhaltsverzeichnis

Agenturpartner in Hannover

Edit Content

Heise RegioConcept

Wir kümmern uns um Ihre Homepage, Ihre Werbung bei Google und Bing, die Optimierung der Findbarkeit Ihrer Firmen-Homepage in Suchmaschinen, Ihre Unternehmens-App, Ihre Social-Media-Aktivitäten, Ihre Präsenz in regionalen Print- und Online-Verzeichnismedien sowie Ihre Bannerwerbung.

Mit innovativen Ideen und kreativen Marketingansätzen positionieren wir Sie und Ihre Produkte bei Ihnen vor Ort. Wir wissen um die unterschiedlichen Bedürfnisse unserer Kunden. Deshalb entwickeln wir speziell für Sie ein individuelles Konzept, auf dessen Basis wir Ihre Produkte, Marken und Dienstleistungen erfolgreich am Markt in Szene setzen.

— Karsten Marquardsen,
Geschäftsführer
Alle WordPress-Agenturen →

Lust auf mehr?

Elementor Showcase für Shops und Websites

Alles geht super easy. Und die Einrichtung deines Shops oder deiner Website ist in weniger als 5 Minuten fertig.

WordPress Plugin MasterStudy: So könnten Sie Trainingsangebote direkt vermarkten

Ich beginne heute mal mit einer kleinen Story. Ein Bekannter von mir ist Personal Trainer im Leistungssport. Im Rahmen seiner Weiterbildungen kam er mit dem Thema Augentraining in Berührung, das ihn faszinierte.

WordPress Plugin Cost Calculator: komplexe Produkte im WooCommerce Shop verkaufen

Ein T-Shirt in einem WordPress Woocommerce Shop zu verkaufen ist relativ einfach. Größe und Farbe auswählen. Das war es.

Schreibe einen Kommentar Antworten abbrechen

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

Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Alle Städte und Leistungen
  • Alle Städte
  • Augsburg
  • Basel
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Hamburg
  • Hannover
  • Heidelberg
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Osnabrück
  • Passau
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Stuttgart
  • Wien
  • Wiesbaden
  • Wuppertal
  • Zürich
  • Alle Städte und Leistungen
  • Alle Städte
  • Augsburg
  • Basel
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Hamburg
  • Hannover
  • Heidelberg
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Osnabrück
  • Passau
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Stuttgart
  • Wien
  • Wiesbaden
  • Wuppertal
  • Zürich

Agentur nach Schwerpunkt finden

  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden
  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden

Aus unserem Magazin

  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social Media
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • Webdesign
  • WordPress
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social Media
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • Webdesign
  • WordPress
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Kunden-Login
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Kunden-Login
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen