Easy FancyBox

Beschreibung

Easy FancyBox Plugin für WordPress Websites stellt Dir eine flexible und ästhetische Lightbox-Lösung für beinahe alle Medien-Links auf Deiner Website zur Verfügung. Easy FancyBox verwendet eine aktualisierte Version der traditionellen FancyBox jQuery Erweiterung und ist WP 3+ Multi-Site kompatibel. Nach der Aktivierung findest Due den neuen Abschnitt FancyBoxauf der Seite Einstellungen > Medien im Backend, wo Du die Optionen des Plugins verwalten kannst.

After activation, all links to JPG, GIF and PNG images are automatically opened in the FancyBox Mac/Gnome-style lightbox that floats over the web page.

GDPR / EU Privacy

This plugin does not collect any data and does not set any browser cookies. However, the PRO version offers an option to disable the automatic popup after the first visit, which needs a browser cookie. This cookie stores the visitors first website visit timestamp and path on the client side. It is not shared nor is any data stored server side or elsewhere.

FEATURES

Supported media and content types:

  • All common image formats including webp
  • Hosted Video auf Youtube, Vimeo und Dailmotion
  • PDF files (embed with object tag, in iframe or in external Google Docs Viewer)
  • SWF (Flash) files
  • SVG Media Bilder(Dank an to Simon Maillard)
  • Inline HTML content (see instructions in the FAQs)
  • External web pages (see instructions in the FAQs)

Also supports:

Additional features:

  • Modal window option (see instructions in the FAQs)
  • Automatic detection of media file links
  • Automatic detection of galleries
  • Popup on page load optional (see instructions in the FAQs)
  • Fade or Elastic popup effects
  • Styling options for light box overlay (color and opacity) and window (border size and color)

Für erweiterte Optionen und Priority Support gibt es eine Pro Erweiterung. Siehe Pro Features nachstehend.

See FAQ’s for instructions to manage YouTube, Dailymotion and Vimeo movies (and similar services) and tips to make inline content display in a FancyBox overlay.

Erhalte Unterstützung auf der Easy FancyBox Website oder im WordPress Forum.

Visit FancyBox for more information and examples.

PRO FEATURES

  • Priority support on dedicated forum
  • Slideshow effect for galleries (autorotation)
  • Spotlight effect for the light box overlay
  • FacetWP, Gravity Forms and TablePress compatibility
  • More styling options: rounded corners, inline content background and text colors
  • More automatic popup options: triggered by URL hash, first link by media type, hide popup after first visit
  • Pass dedicated light box setting per media link via link class (see Metadata instructions in the FAQs)
  • More elastic (easing) popup effects on open and close
  • Show/hide image title on mouse hover
  • Fine-tune media link and gallery autodetection to match your theme source markup to allow galleries per post for example

For these additional features, you need to install the Pro extension alongside this free plugin.

Unterstützen

Falls Du mit dem Plugin zufrieden bist, dann schreibe eine rasche Bewertung oder unterstütze andere Benutzer im Support Forum.

Falls Du beim Aufbau dieses Plugins mithelfen möchtest, dann bist Du sehr willkommen Easy FancyBox in Deine Sprache zu übersetzen oder Code auf Github beizutragen.

KNOWN ISSUES

Allgemein

  • Outbound links or Downloads tracking in some of the stats plugins can interfere with FancyBox. Disable such option or exclude links manually with a class (see instructions for SlimStat below)
  • Most plugins and themes that already include a light box script. Continue reading to see if you are using one of the know ones or follow the troubleshooting steps to find out what is conflicting on your site.
  • Any theme that is missing the obligatory <?php wp_footer(); ?> call in the footer.php template.
  • Es wird nicht empfohlen, iFrames als Inline-Content in FancyBox anzuzeigen, denn dabei wird der iFrame nach dem Öffnen und Schliß0en leer angezeigt. Lösung: Link direkt zur iFrame-Quelle und class="fancybox-iframe" im Link verwenden.
  • Eingebetteter Flash Content ohne wmode oder wmode ‚Fenster‘, wird oberhalb der Überlagerung angezeigt und anderer durch Javascript erzeugter Inhalt wie Dropdown Menus. WordPress überprüft nicht nach fehlendem wmode in oEmbed generiertem eingebettetem Code. Seit Version 1.3.4.5, wird fehlender wmode von diesem Plugin für WP (Auto-)Einbettungen aber nicht für benutzer-generierten eingebetteten Inhalt hinzugefügt. Setzte den wmode Parameter auf ‚opaque‘ (beste Performance) oder ‚transparent‘ (nur für benötigte Transparenz) für Deinen eingebetteten Inhalt.

Plugin Konflikte

  • jQuery Updater ändert jQuery auf Version 2+, die nicht kompatibel ist.
  • All in One SEO Pack und Analytics for WordPress mit Tracking ausgehender Links. Deaktiviere diese Einstellung.
  • WP Slimstat mit aktivierten Track Outbound Clicks, wird den Lightbox-Effekt in einigen Browsern stören. Durch Verwenden von fancybox (oder eine andere der Klassen wie fancybox-youtube,fancybox-iframe,fancybox-inline abhängig davon, welche Medien in FancyBox gezeigt werden sollen) im „Do Not Track“ Feld sollte das Problem – wie berichtet wird – lösen. Slimstat könnte auch Probleme mit der YouTube URL-Umwandlung verursachen. Mit einem Klick auf einen Youtube Link öffnet das Video zunächst wie gewünscht in einer Überlagerung, dann wird die ganze Seite jedoch auf die original YouTube Seite weiter geleitet. Durch Hinzufügen von class="noslimstat" zum Link sollte das Problem – wie berichtet wird – beheben.
  • Standardgemäß konvertiert Google Analytics für WordPress Links wie href="#anyID" zu href="http://yoursite.url/page/#anyID", was die Anzeige von Inline Content in FancyBox verhindert.
  • Sowohl die uBillBoard und Camera Slideshow haben ein eigenes Easing-Script direkt codiert, was zu einem Konflikt mit dem Easing in Easy FancyBox führt. Die einzige Möglichkeit zur Behebung ist es, sowohl Easing In und Easing Out auf Deiner Einstellungen > Medien Seite auf Swing zu ändern.
  • WordPress Firewall 2 blockiert den Zugriff auf Bilddateien, die für eine einwandfreien Anzeige der FancyBox Überlagerung in älteren IE- und Nicht-CSS3-Browsern erforderlich sind.
  • WordPress Amazon Associate: Ein Script von Amazon und das FancyBox Script sind nicht kompatibel. Das Deaktivieren vonProduct Previewauf der WP – Amazon > Settings Seite sollte das Problem beheben.
  • WP Supersized verwendet die Animate Enhanced jQuery Erweiterung, die einen Konflikt mit der von FancyBox verwendeten Easing Extension verursacht. Dies resultiert in einem 0px Lightbox-Frame und/oder zu einem Positionierungsfehler mit der Auto-Zentrierung.

Theme Konflikte

  • In älteren Versionen von Elegant Themes ist FancyBox direkt kodiert, wodurch sie inkompatibel mit Easy FancyBox sind. In den neueren Versionen des Themes gibt es eine Option um die eingebaute FancyBox zu deaktivieren, Verwende diese Option um Dein Theme kompatibel mit Easy FancyBox zu machen 🙂
  • Das Mystique Theme hat zwei Optionen: „Lightbox“ und „Optimize website for faster loading“ die FancyBox stören . Deaktiviere beide in Mystique’s Einstellungen > Advanced.
  • Imbalance und andere Themes, die die Galleria jQuery Erweiterung verwenden: aktiviere die JSGallery Option.
  • Themes wie Envisioned, Chameleon und einige andere haben FancyBox integriert. Es gibt keine andere Lösung, als entweder jeden mit FancyBox in Verbindung stehenden Code aus dem Theme zu entfernen oder das Plugin zu deaktivieren und die im Theme vorhandene Version zu verwenden …
  • Themes, die auf dem Thesis Framework basieren, könnten Probleme im IE 8 aufweisen, für die ein Hack vorgeschlagen wird

Screenshots

  • Beispielbild mit Überleger Caption. Das ist die Standardanzeige von Easy FancyBox für Bilder. Weitere Optionen sind Insideund das alte Outside.

  • Beispiele eines YouTube Filmes in der Überlagerung.

Installation

WordPress

Quick Installation: Jetzt installieren !

… ODER …

Suche nach „easy fancybox“ und installiere auf der Plugins > Installeiren Seite im Backend.

… ODER …

Folge diesen Schritten:

  1. Download Archiv.

  2. Upload der zip-Datei über die Plugins > Installieren > Plugin hochladen … ODER … entpacke die zip-Datei und lade den Ordner via FTP in das Verzeichnis wp-content/plugins/.

  3. Aktiviere das Plugin auf der Plugins-Seite.

Fertig! Alle Bilder, die direkt verlinkt sind (jedoch nicht die mit Link zu einer WordPress-Seite), öffnen nun in FancyBox

Nicht glücklich mit den Standard-Einstellungen? Schaue einmal zu den neuen Optionen auf Einstellungen > Medien.

WordPress MU / WordPress 3+ in Multi Site Modus

Wie oben, aber führe Netzwerkweit aktivieren durch, um FancyBox Bild-Überlagerungen auf allen Sites Deines Netzwerkes zu aktivieren. Es müssen keine Datenbank Tabellen erstellt oder bearbeitet werden und keine Aktivierung muss durchgeführt werden um die Funktionalität mit den Basiseinstellungen zu gewährleisten.

FAQ

BASIC
Was ist FancyBox?

Grundsätzlich ist es zeitgemäße Art, Bilder, Videos, Dokumente in Inline-Content in Deiner Website zu präsentieren. Beispielweise werden damit Bilder – deren verkleinerte Version Du im Beitrag mit einem Link zur Originaldatei gespeichert hast , nicht auf einer leeren Seite sondern im FancyBox Überleger gezeigt. Besuche FancyBox für weitere Infos und Beispiele.

Welche Version von FancyBox verwendet dieses Plugin?

This plugin uses an updated version of the original FancyBox 1.3.4, better adapted to the mobile era.

Ich habe das Plugin installiert. Was nun?

Zuerst stelle sicher, dass die Thumbnails in den Seiten und Beiträgen mit dem entsprechende Bild in Originalgröße verlinkt sind. Wähle irgendeinen Beitrag zum Bearbeiten und Auswählen des ersten Thumbnails. Klick auf denBearbeiten Button der nun angezeigt wird und wähle Link zur: Medien-Datei File.Jetzt öffnet sich bei Klick auf das Thumbnail die Original-Version in FancyBox.

Das gleich funktioniert mit WordPress Galerien. Wähle Link zur: Medien-Datei beim Einfügen einer Galerie.

Where is the settings page?

Es gibt keine neue Einstellungen-Seite aber es gibt viele Optionen, die Du ändern kannst. Du findest einen neuen FancyBox Abschnitt auf Einstellungen > Medien. Die Standardeinstellungen siehst Du auf den Screenshots mit Beispielen

Hilfe! Es funktioniert nicht …

Folge bitte den Schritten zum Trouble-Shooting am Ende der Plugin-Beschreibung oberhalb, um die Ursache zu bestimmen. Falls das fehlschlägt, suche nach Hilfe auf Easy FancyBox WordPress Forum oder gehe auf die Entwicklungs-Site
 

FORTGESCHRITTEN
Wird eine WordPress Galerie in einem FancyBox Überleger angezeigt?

Ja, aber nur wenn die Option Link zu: Medien-Datei beim einfügen in die Galerie ausgewählt ist! Der Galerie Shortcode sollte so ähnlich aussehen wie [ gallery link="file" ].

Die Lightbox sieht auf der mobilen Ausgabe nicht gut aus. Was kann ich dagegen tun?

The original FancyBox 1.3.4 script was not developed with mobile devices in mind and although the version used in this plugin has some adaptations for mobile devices, it might still be less optimal for very small screens. The only way around this issue is currently to disable FancyBox for small screen sizes on Settings > Media in the section Miscellaneous > Browser & device compatibility.

Kann ich eine Slideshow aus meiner Galerie erstellen?

In der Pro Erweiterung gibt es dafür die Advanced Option „Gallery Auto-rotation“.

Kann ich Bilder oder andere Links von den automatischen Attributen ausschließen?

Ja. Bei allen Links mit der Klasse nolightbox die normalerweise automatisch aktiviert werden, wird das Öffnen im FancyBox Überleger verhindert.

<a href="url/to/fullimg.jpg" class="nolightbox"><img src="url/to/thumbnail.jpg" /></a>
Kann NextGEN Gallery mit Easy FancyBox arbeiten?

NextGEN hat eine eigene FancyBox Version samt der Option, andere Lightbox Scripts zu wählen. Falls Du lieber Easy FancyBox verwendest (wegen der besseren Einstellbarkeit und der Unterstützung für anderen Medien), dann sind ein paar Schritte erforderlich, um die beiden Plugins miteinander kompatibel zu machen.

  1. Gehe zur Einstellungen > Medien Seite und schalte die FancyBox „Auto-gallery“ Option im Bilder-Bereich AUS;
  2. Gehe zu Galerie > Weitere Optionen und setzte die Lightbox Effekt Option auf „Custom“ und klick auf Zeige fortgeschrittene Einstellungen;
  3. fill the Code field with
    class=“fancybox“ rel=“%GALLERY_NAME%“
  4. Lasse die anderen Felder frei und speichere die Einstellungen.
Kann ich EIN Thumbnail verwenden um eine komplette Galerie zu öffnen?

Das geht händisch (mit oder ohne der WordPress-eigenen Galerie) oder in Kombination mit NextGen Gallery.

Manual

A. Öffne deinen Beitrag im HTML-Tab und füge das erste Thumbnail in den Beitrag-Inhalt ein (Verlinke mit der Mediendatei und nicht zur Anhang-Seite), das als Galerie-Thumbnail dienen soll.

B. Platziere den nachstehenden Code um ein verborgenes DIV zu verwenden, in dem alle Bilder, die nur in der FancyBox angezeigt werden sollen, gespeichert sind:

<div class="fancybox-hidden">

C. Gleich danach, in einer neuen Zeile, für alle anderen Bilder ein, die Du in der Galerie zeigen möchtest. Du kannst auch die WordPress Galerie mit dem Shortcode [gallery link="file"] verwenden. WICHTIG: Falls das Galerie-Thumbnail beim Beitrag gespeichert ist, wird es ein zweites Mal angezeigt beim Durchlauf durch die Galerie mit FancyBox. Falls Du das nicht möchtest, dann verwende ein Bild als Thumbnail, das nicht zu diesem Beitrag gespeichert wurde.

D. Schließe das verborgene div mit dem nachstehenden Code in einer neuen Zeile:

</div>

Mit NextGEN Gallery

Du kannst zwischen zwei Shortcodes zur Anzeige einer Galerie wählen, die (1) die Anzahl der Bilder pro Galerie begrenzen mit den Shortcode [nggallery id=x] oder (2) über den Tag-Namen (galerieübergreifend; Du musst die Tags händisch einspeichern => mehr Arbeit aber bessere Kontrolle) mit dem SHortcode [nggtags gallery=YourTagName,AnotherTagName].

Allgemeine Schritte:

A. Platziere den gewünschten Shortcode im Inhalt der Seite/Des Beitrages.

B. Konfiguriere NextGen auf Gallery > Gallery Settings um Galerie als „NextGEN Basic Thumbnails“ anzuzeigen und dann unter NextGEN Basic Thumbnails um zumindest die nachstehende Einstellungen wie folgt vorzunehmen:

  1. Anzahl der Bilder pro Seite: 1
  2. Imagebrowser Effekt verwenden: Nein
  3. Verborgene Bilder hinzufügen: Ja

C. Optional: füge die nachstehende CSS Regel in das Stylesheet Deines Themes ein (oder installiere Custom CSS oder Jetpack und fügen es auf der neuen Einstellungen > Edit CSS Admin Seite ein) um die Page-Links unterhalb der Thumbnails zu verbergen.

.ngg-navigation {
display:none;
}
Kann ich YouTube, Dailymotion und Vimeo Filme in einer FancyBox Überlagerung abspielen?

Ja. Erstelle in Deiner Seite/Deinem Beitrag einfach einen Link mit der URL, die zu teilen ist (der komplette Link, eine Kurz-URL oder ohne Optionen wie HD) zur YouTube/Vimeo/Dailymotion-Seite. Falls Auto-Erkennung aktiv ist, dann wird das Plugin die weitere Arbeit für Dich übernehmen 🙂

Falls Du Autoerkennung ausgeschaltet hast, gib dem Link ein Klassenattribut wie class="fancybox-youtube" für Youtube, class="fancybox-vimeo" für Vimeo und class="fancybox-dailymotion" für Dailymotion, um FancyBox manuell dafür zu aktivieren.

Sowohl YouTube als auch Vimeo Videos können sofort beim Öffnen starten. Dazu füge den Parameter autoplay=1 in die URL. zB: die YouTube Short-URL, die in HD-Mode abspielt, einen Vollbildschirm Button hat und beim Öffnen automatisch startet sieht aus wie:

<a href="https://youtu.be/N_tONWXYviM?hd=1&fs=1&autoplay=1">text or thumbnail</a>
Ich möchte diesen ‚Vollbildansicht‘ Button auf meinen YouTube Filmen anzeigen

Füge &fs=1 an Deine YouTube Teilen-URL an.

Kann ich eine Youtube Playlist in FancyBox anzeigen?

Ja, gehe einfach zur YouTube-Seite eines beliebigen Videos aus der Playlist und klicke auf den Teile-Link um die URL zum Teilen zu erhalten, genau wie bei Einzelvideos; nur bestätige diesmal „Teilen mit der Playlist“.

Kann ich ein NextGEN Thumbnail mit einem Youtube Video in FancyBox verlinken?

User Mark Szoldan teilte einen geschickten Trick um das zu bewerkstelligen:

  1. Folge der Anleitung oberhalb, damit Easy FancyBox reibungslos mit NextGEN arbeitet und stelle sicher, dass es für alle Thumbnails, die zu ihrer Originalversion verlinkt sind, korrekt funktioniert.
  2. Dann speichere zum dem Bild, das Du mit einem YouTube Video verlinken möchtest, die URL der YouTube Seite als Title.
  3. Abschließend füge den nachstehenden Code in ein Text-Widget, das in der Sidebar oder im Footer angezeigt wird, oder Du kannst den Code auch direkt in Deinem Themen einfügen. Achte dabei darauf, dass der Code vor wp_footer() steht ..

    jQuery(‚.fancybox [title*=“www.youtube.com“]‘).each(function() {
    var title = jQuery(this).attr(‚title‘);
    var desc = jQuery(this).parent().attr(‚title‘);
    jQuery(this).attr(‚title‘, desc);
    jQuery(this).parent().attr(‚href‘, title);
    });

Dieses Snippet wird den Bild-Title scannen und falls es darin eine Youtube URL findet, wird es entsprechend das href-Attribut ersetzen.

Kann ich eine Galerie mit Youtube Thumbnails erstellen, die in FancyBox öffnet?

Du könntest das händisch machen durch Upload individueller Thumbnails, die Du durch Verwendung der einzigartige Film-ID in diesen URL für drei unterschiedliche Größen verwenden kannst:

https://img.youtube.com/vi/UNIQUE-MOVIE-ID/default.jpg
https://img.youtube.com/vi/UNIQUE-MOVIE-ID/mqdefault.jpg
https://img.youtube.com/vi/UNIQUE-MOVIE-ID/hqdefault.jpg

Andere Orte könnten sein

https://img.youtube.com/vi/UNIQUE-MOVIE-ID/0.jpg (same as hqdefault.jpg)
https://img.youtube.com/vi/UNIQUE-MOVIE-ID/1.jpg
https://img.youtube.com/vi/UNIQUE-MOVIE-ID/2.jpg
https://img.youtube.com/vi/UNIQUE-MOVIE-ID/3.jpg
https://img.youtube.com/vi_webp/UNIQUE-MOVIE-ID/0.webp (same as hqdefault.webp)
etc...

Eine einfacher Methode ist die von Shashank Shekhar geteilte (Danke!) :

Um Youtube Thumbnail-Galerien zu erstellen, installiere https://wordpress.org/plugins/youtube-simplegallery/ und stelle die ‚Effect‘ Option auf fancybox. Dann deaktiviere Youtube Autoerkennung auf Einstellungen > Medien.

Kann ich Websites oder HTML-Dateien in einer FancyBox Überlagerung anzeigen?

Ja. Aktiviere zuerst die iFrame Option auf Einstellungen > Medien. Dann erstelle im Beitrags- oder Seiteninhalt einen Link mit entweder class="fancybox-iframe" oder class="fancybox iframe" (beachte den Abstand anstatt des Bindestriches) zu jeder beliebigen Website oder jeder .htm(l)-Seite.

WICHTIG: der Unterschied dieser zwei Klassen (‚-‚ oder Leerzeichen) liegt in der Größe des Überlegers. Probiere aus und verwende das, was dir am besten zusagt 🙂

Kann ich PDF Dateinen in einer FancyBox Überlagerung anzeigen?

Ja. Platziere einfach einen Link mit einer URL, die mit .pdf endet zu Deiner PDF-Datei im Seiteninhalt.

Falls Du Auto-detect unter SWF auf der Einstellungen > Medien Admin Seite nicht aktiviert hast, musst Du class="fancybox-pdf" zum Link hinzufügen um FancyBox dafür zu aktivieren.

Kann ich SWF Dateien in einer FancyBox Überlagerung abspielen?

Ja. Platziere einfach einen Link mit einer URL, die mit .swf endet zu Deiner Flash-Datei im Seiteninhalt.

Falls Du Auto-detect unter SWF auf der Einstellungen > Medien Admin Seite nicht aktiviert hast, musst Du entweder class="fancybox" oder class="fancybox-swf" zum Link hinzufügen um FancyBox dafür zu aktivieren.

Wie zeige ich Inhalt mit unterschiedlichen Größen?

FancyBox versucht die Größe des Inhaltes automatisch zu ermitteln. Falls jedoch keine Größe gefunden wird, dann werden die Standardeinstellungen für diesen Inhaltstyp übernommen, wie sie auf der Einstellungen > Medien Seite festgelegt wurden.

Die Pro Erweiterung bietet eine zusätzliche Option um dies händisch zu überschreiben durch Definition von Breite und Höhe innerhalb von geschweiften Klammern im Klassenattribut direkt im Link. Stelle sicher dass „Include the Metadata jQuery extension script…“ unter FancyBox | Verschiedenes | Fortgeschritten auf Einstellungen > Media aktiviert ist.

Beispielsweise ein Flash Video mit anderer Größe:

<a class="fancybox-swf {width:1024,height:675}" href="link-to-your-swf"></a>
Das Flash Video im Überleger zeigt UNTERHALB weitere Flash Inhalt der selben Seite!

Stelle sicher, dass der ANDERE Flash Inhalt den wmode gesetzt hat, vorzugsweise ‚opaque‘ oder ‚transparent‘ jedoch niemals ‚window‘ oder ohne. Beispielsweise, falls Dein eingebettetes Objekt so ähnlich aussieht wie:

<object type="application/x-shockwave-flash" width="200" height="300" data="...url...">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="movie" value="...url..." />
</object>

ergänze nur <param name="wmode" value="opaque" /> in den weiteren Parametern. Oder falls Du eine Einbettung verwendest wie:

<object width="640" height="385">
<param name="movie" value="...url..."></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="...url..." type="application/x-shockwave-flash" width="640" height="385" allowscriptaccess="always" allowfullscreen="true" wmode="window"></embed>
</object>

ändere nur das wmode="window" auf wmode="opaque" oder ergänze das Attribut, falls es fehlt.

Wie kann ich INLINE Content in einer FancyBox Überlagerung anzeigen?

Zuerst gehe zu Deiner Einstellungen > Medien Admin Seite und aktiviere die Inline Option unter den FancyBox Einstellungen. Nach dem Speichern der Admin-Seite wird nun ein neuer Bereich namens „Inline“ angezeigt, wo du die Parameter optimieren kannst.

Dann öffne Deinen Beitrag/Seite um im HTML-Tab zu arbeiten und den Inline Content einzufassen in

<div style="display:none" class="fancybox-hidden"><div id="fancyboxID-1" class="hentry" style="width:460px;max-width:100%;">
...inline content here...
</div></div>

Dann platziere einen FancyBox-Link mit der Klasse „fancybox-inline“ im Inhalt der Seite/des Beitrages, der auf den Inline-Content verweist wie

<a href="#fancyboxID-1" class="fancybox-inline">Read my inline content</a>

HINWEIS: Die ID des umschließenden DIVs muss einzigartig sein und muss zum href in den Links mit einem # davor passen. Beim oben stehenden Beispiel für mehrere FancyBox Inline-Content (verborgendes DIV + opening Link) -Kombinationen auf einer Seite, vergib an das zweite die ID fancyboxID-2, und so weiter …

HINWEIS 2: falls Du feststellst, dass der Inline-Content innerhalb der FancyBox anders gestaltet ist als der Rest des Seiteninhaltes, dann könntest Du das Attribute des DIVs von class="hentry" aus etwas, das zu Deinem Theme passt. Stelle fest, welche Klasse für den Hauptinhalt Deiner Seite verwendet wird und verwende diese.

Kann ich ein Kontakformular in FancyBox anzeigen?

Ja. Es sind unterschiedliche Methoden vorstellbar, aber die einfachste ist die Verwendung der Inline-Methode. Gehe zuerst zur Settings > Media Admin Seite und aktiviere die Inline-Content Option. Dann gehe zurück zum Bearbeiten der Seite oder des Beitrages im Text-Tab. Der Inline-Content kann ein Shortcode sein, wie in diesem Beispiel mit Contact Forms 7 und Easy FancyBox:

<a href="#contact_form_pop" class="fancybox-inline">Contact Us</a>

<div style="display:none" class="fancybox-hidden">
    <div id="contact_form_pop" class="hentry" style="width:460px;max-width:100%;">
        [contact-form-7 id="87" title="Contact form 1"]
    </div>
</div>

Ersetze den Shortcode (zwischen den [ und ] Zeichen) mit dem vom Plugin erstellten. Es kann auch mit Shortcodes von anderen Plugins wie Jetpack’s Contact Form gearbeitet werden. Ändere die Klasse des DIVs, das den Inhalt umgibt, damit die CSS-Styles für Inhalt von Seiten auch für den Inline-Content verwendet werden.

Kann ich verborgenen Inhalt oder Bilder bei Laden der Seite aufpoppen lassen?

Ja. Ein Link mit der ID fancybox-auto (ACHTUNG: kann nur einmal pro Seite verwendet werden) wird automatisch beim Laden der Seite ausgewählt.

Benutze die oben stehende Anleitung für Inline-Content, nur weise diesmal dem Link auch id="fancybox-auto" zu (aber belasse die Klasse ebenfalls) und entferne den Anker-Text um ihn zu verbergen. Nun wird der Inhalt des verborgenen DIV automatisch aufpoppen, wenn jemand die Seite öffnet.

Das gleich kann mit einem Bild, Flash Movie, PDF oder iFrame-Link gemacht werden! Aber denken bitte daran, dass es nur ein Element pro Seite geben kann, bei dem die ID fancybox-auto verwendet werden kann.

Can I have a modal window ?

Yes, just create a hidden inline content light box (can be auto-popup) as described above and give the link an extra class „modal“. This will remove all options to close the light box, like the close button, an overlay click or escape key.

This means there is NO option to close the light box, unless you create a link like this inside the hidden inline content div:

<a href="" class="fancybox-close">Accept</a>
Kann ich eine Menü-Element in einer FancyBox Überlagerung öffnen lassen?

Ja, aber es hängt von Deinem Theme ab, was erforderlich ist, damit es funktioniert. Verwendest Du WP 3+ und Dein Theme unterstützt das neuen WP-Menu oder wenn Du ein individuelles Menu in einem Sidebar-Widget verwendest, dann ist es einfach:

  1. Gehe zu Einstellungen > Medien und aktiviere die FancyBox iFrame Unterstützung.
  2. Gehe zu Design > Menus und öffne den kleinen Tab „Ansicht anpassen“ in der Ecke rechts oben.
  3. Aktiviere die Option „CSS-Klassen“ unter Erweiterte Menüeigenschaften anzeigen.
  4. Jetzt gib dem gewünschten Element, das in einem FancyBox iFrame öffnen soll die Klasse fancybox-iframe.

Falls Du eine ältere WordPress Version verwendest oder wenn WP Menus nicht verfügbar sind, dann sind ein paar größere Eingriffe in Dein Theme nötig. Im Grunde musst Du es nur bewerkstelligen, dass ein Menuelement, das im Lightbox Überleger öffnen soll, die class="fancybox-iframe" erhält.

How can I make AJAX loaded content be seen by FancyBox ?

Easy FancyBox initially scans the page source for media links on the „Document Loaded“ event. This means right after the page source has become available to and read by the browser. When content is added or modified through AJAX (meaning after initial page load) by your theme or another plugin, then FancyBox will not be aware of any media links in that new content.

To make Easy FancyBox rescan the updated page source after content has been modified though AJAX, there is an event listener available. This event is also triggered by the Jetpack Infinite Scroll module. To use this event, you’ll need to modify the theme or other plugin script that handles the AJAX calls.

You can trigger the event like this:

jQuery(document.body).trigger('post-load');

Note: It completely depends on the AJAX script where this code snippet should be placed. Optimally, right after the DOM modification where content is added or modified. In most cases at the end of the AJAX Success handler.

Ist Easy FancyBox Multisite kompatibel?

Ja. Arbeitet mit Netzwerkweit aktivieren und erfordert keine händische Aktivierung auf den einzelnen Sites Deines Netzwerkes.

TROUBLE SHOOTING

Falls, nach der Aktivierung, Deine Bilder nicht in der FancyBox Überlagerung öffnen, kann es dafür unterschiedliche Gründe geben. Einige können einfach behoben werden, andere sind schwieriger zu lösen. Folge diesen Basis-Checks um sicher zustellen, dass alles korrekt eingerichtet ist:

Basis Checks
  1. Stelle sicher, dass Thumbnails direkt mit deren Originaldatei verlinkt sind, nicht zu einer dynamischen WordPress Seite, auf der das große Bild angezeigt wird. Das heisst, dass Du beim Einfügen eines Bildes in Deinen Beitrag oder Deine Seite immer die Auswahl Medien-Datei bei Link zur Auswahl anstatt Anhang-Seite wählen musst. Auf älteren Beiträgen/Seiten musst Du diese Einstellungen händisch ändern, falls Du bisher Bilder mit Anhang-Seite eingefügt hast; FancyBox kann diese Einstellung nicht für Dich ändern.
  2. Stelle sicher, dass Du alle benötigten Medien und deren Auto-detect Option auf der Einstellungen > Medien Seite aktiviert hast. Falls Du andere Bildformate ausser JPG, GIF oder PNG verwendest, musst Du die Erweiterung für Auto-Detect der Bilder hinzufügen. ACHTUNG: die Bilddatei-Namen müssen mit dieser Erweiterung enden. Das heisst, dass – falls Du eine Bilddatei ohne Erweiterung (endet nicht mit .jpg oder anderes) hast – FancyBox diese nicht als Bild erkennen kann; auch wenn sie im JPG-Format gespeichert wurde. Du musst bei diesen Links die Klasse fancybox händisch einfügen um FancyBox anzusprechen.
Allgemeine Schritte zur Problemlösung
  1. Switch off all other plugins and switch your sites appearance to the default Twenty Seventeen theme. FancyBox should work now. If so, continue with the next step. If not, re-install the plugin and verify the basic steps above.
  2. Wechsle zurück zu Deinem Original-Theme und prüfe, ob FancyBox weiterhin arbeitet. Falls ja, gehe weiter mit dem nächsten Schritt. Falls nein, siehe die Theme-Inkompatibilität Checks weiter unten.
  3. Schalte ein Plugin nach dem anderen (das zuvor aktiv war) wieder ein. Prüfe die Funktion jedes Mal um festzustellen, an welchem Punkt FancyBox beginnt fehlerhaft zu arbeiten und Du hast das verursachende Plugin gefunden.
Theme Inkompatibilitäts-Checks
  1. Zuerst siehe bekannte Konflikte weiter oben, dann fahre mit diesen nächsten Schritten fort.
  2. Make sure your theme is capable of placing the needed javascript and css in the page header and footer. Open any page on your site and view the source code by right-clicking on an empty section and selecting ‚View source…‘ (or similar). There you will need to check of there are any references to javascript files like jquery.fancybox.min.js?ver=x.x.x near the closing </body> tag. There should also be a easy-fancybox.min.css?ver=x.x.x in the head section… If it’s not there, your theme is really out of date. Consider switching to a new theme fast!
  3. Stelle sicher, dass die Plugins die Haupt jQuery Bibliothek-Datei nicht öfter als einmal laden. Suche nach Verweisen auf Javascript-Dateien wie jquery.js?ver=x.x.x oder jquery.min.js Im Seitenquelltext. Falls Du es öfters als einmal findest, dann versuche herauszufinden, in welche Vorlagedatei des Themes dieser Verweis direkt hineingecodet wurde und entferne diese Zeile. Normalerweise in header.php oder footer.php
  4. Überprüfe, ob Dein Theme ein anderes oder das selbe Lightbox Script lädt. Suche nach Verweisen auf Thickbox, Prettyphoto, Lightbox2, Colorbox oder FancyBox Script Dateien oder Code. DIese verursachen wahrscheinlich die Inkompatibilität und Du musst entweder Dein Theme anpassen oder zu einem anderen Theme wechseln.

Falls Du die Bilder noch immer nicht in FancyBox sehen kannst, frage im Easy FancyBox WordPress Forum oder gehe zur Entwickler Website

Plugin Inkompatibilitäts-Checks
  1. Falls Du der Anteilung zum allgemeinen Trouble-Shooting gefolgt bist, dann solltest Du nun wissen, welches Plugin einen Konflikt mit Easy FancyBox verursacht. Überprüfe nun zuerst „Bekannte Plugin-Konflikte“ weiter oben. Falls das Plugin und eine Lösung nicht zu finden sind, dann gehe weiter mit den nächsten Schritten.
  2. Stelle sicher, dass die Plugins die Haupt jQuery Bibliothek-Datei nicht öfter als einmal laden. Suche nach Verweisen auf Javascript-Dateien wie jquery.js?ver=x.x.x oder jquery.min.js Im Seitenquelltext. Falls Du es öfter als einmal findest, dann versuche herauszufinden, woher das kommt.
  3. Überprüfe, ob Dein Theme ein anderes oder das selbe Lightbox Script oder irgendeine andere der benötigten jQuery Erweiterungen wie jquery.easing oder jquery.mousewheel lädt. Suche nach Verweisen auf Thickbox, Prettyphoto, Lightbox2, Colorbox oder FancyBox Script Dateien oder Code. DIese verursachen wahrscheinlich die Inkompatibilität und Du musst entweder eine Einstellung bei dem anderen Plugin finden um die Verwendung des betreffenden Scripts auszuschalten (möglicherweise zB. in NextGEN, siehe unter FORTGESCHRITTEN nachstehend) oder Dich für eines der Plugins entscheiden.

Rezensionen

Newest release: superb!

I just updated, after letting my site languish on legacy Fancybox for quite awhile. The new version has a learning curve (especially if you’re not a javascript heavy). But the effort is well worthwhile. The new overwhelms the old in efficiency, bandwidth, and speed. All my pals. Smooth as silk. I’d place this review directly on the fancyapps site but they don’t have anywhere to put it. The plug-in is well worth an investment.

Awesome for youtube videos and much better performance. Works with Divi 😀

Easy Fancybox makes it a bliss to show youtube videos in a lightbox upon user clicking on a thumbnail, instead of embedding the video directly on the page (which causes a performance hit).

With Easy Fancybox and standard caching, my page speed rating returned to A and load speed to <500 ms.

Using it with Divi and Slimstat – no issues…

Thanks!

Update: With version 1.8 and new youtube „Enable privacy-enhanced mode“, the privacy has been significantly improved, as no cookies are set when showing youtube videos.. A big plus.. Thanks again!

Lies alle 155 Rezensionen

Mitwirkende & Entwickler

„Easy FancyBox“ ist Open-Source-Software. Folgende Menschen haben an diesem Plugin mitgewirkt:

Mitwirkende

„Easy FancyBox“ wurde in 10 Sprachen übersetzt. Danke an die Übersetzerinnen und Übersetzer für ihre Mitwirkung.

Übersetze „Easy FancyBox“ in deine Sprache.

Interessiert an der Entwicklung?

Durchstöbere den Code, sieh dir das SVN Repository an oder abonniere das Entwicklungsprotokoll per RSS.

Änderungsprotokoll

1.8.9

  • Prevent gallery next/prev links to show dud target
  • FIX: allow youtube url parameters before v=

1.8.7

  • Autoplay Youtube/Vimeo/Dailymotion
  • FIX: Exclude Vimeo user pages from autodetect
  • FIX: Exclude facebook/twitter share link
  • FIX: PDF embed tag

1.8.6

  • Gutenberg file block download button compatibility
  • Gutenberg gallery block compatibility
  • FIX: Missing argument in easyFancyBox::add_video_wmode_opaque()
  • Remove version URL parameters
  • FIX: jQuery 3+ e.indexOf is not a function

1.8.5

  • FIX: prevent Inline content title

1.8.4

  • Improved center on scroll behavior with title outside
  • FIX: Pro options compatibility

1.8.3

  • FIX: AutoScale option restored
  • FIX: outline issue in Firefox
  • Prevent SiteGround Optimizer warning about break outside loop

1.8.2

  • FIX: main method not returning true in some cases
  • Force all hosted video to https
  • FIX: video iframe needs allow=“autoplay“ on modern browsers
  • FIX: default enqueue priority not 10
  • FIX: possible infinite loop in prev/next and image preloader
  • Move main method (back) to init, position 9
  • Introducing easy_fancybox_enqueue_scripts action hook

1.8

  • NEW: Google Docs Viewer for PDF
  • NEW: Youtube privacy-enhanced embed
  • NEW: Compatibility options: late script inclusion, jquery exclusion, no wp_add_inline_script
  • FancyBox: Improved mobile viewport height detection
  • FancyBox: now skips subsequent double links in gallery
  • FancyBox: new PDF content type
  • FancyBox: improved error messages
  • Dedicated IE8 stylesheet
  • jQuery Easing update to 1.4.1

1.7

  • NEW: Aspect ratio for video frames on smaller screens
  • NEW: Global minimum screen size
  • NEW: Loading icon for video/iframe content
  • NEW: Resize light box on device orientation or browser window size change
  • NEW: Modal window class and close button class
  • FIX: pre PHP 5.4 compatibility
  • FIX: iPhone iframe scrolling
  • FIX: Autoptimize compatibility
  • Switch to wp_add_inline_script() script printing, thanks @szepeviktor

1.6.3

  • FIX: inline js minification incompatibility, thanks @alexiswilke

1.6.2

  • FIX: line breaks hidden on options media admin page since WP 4.9, thanks @garrett-eclipse

1.6.1

  • Nolightbox class in menu also for other media types than images
  • FIX: CSS color code
  • Spelling fixes, thanks @garrett-eclipse
  • FIX: Pinterest button compatibility
  • FIX: Double load plugin text domain

1.6

  • Ergänze webp um standardmäßig Bildtypen automatisch zu erkennen
  • Weitere rel-Attribute aus Galerien entfernen
  • BUGFIX: gallery preload
  • Update jquery.easing.js and jquery.mousewheel.js

1.5.8.2

  • BUGFIX: use dirname(FILE) instead of relying on DIR to be available
  • Explizite Transparenz für Galerie Navigation-Links

1.5.8

  • FIX: variable variable php 7 compat
  • FIX: obj undefined in minified js
  • FIX: nofancybox in menu ignored, thanks Trishah
  • Color value sanitize
  • NEW: auto popup delay
  • NEW: pro extension version compatibility check routine
  • NEW: margin option
  • NEW: iFrame alow full screen option
  • Dropped mu-plugins support
  • Added support for universal nolightbox class
  • Set focus on iframe after load
  • FIX: No center on scroll on touch devices
  • FIX: Allow fullscreen videos

1.5.7

  • FIX: Pro extension link update
  • NEW: WebP support and class=’image‘ to force image media type
  • IE 6-8 css rules optional
  • iframe embed for Youtube, Vimeo and Dailymotion
  • Croation translation
  • HTML5 players allowfullscreen default

1.5.6

  • iPad positioning patch
  • Don’t unregister scripts that are not ours even for conflict prevention
  • box-sizing: border-box issue in Firefox fixed
  • Allow mousewheel scrolling page in the background again

1.5.5

  • Prevent mousewheel scrolling page in the background
  • New stylesheet IE alphaimageloader path fix approach
  • Czech translation added
  • Updated Indonesian translation

1.5.2

  • BUGFIX: easy_fancybox_handler() in combo with trigger(‚click‘) causes Uncaught Exception script error

1.5.1

  • FIX: jQuery 1.9+ compatibility
  • Dropping support for gForms again — „Cannot convert ‚c‘ to object“ error in combination with some older gForms version 🙁
  • NEW: support for Infinite Scroll by Jetpack

1.5.0

  • FIX: CSS3 box-sizing issue (Twenty Thirteen) misplacing close button
  • NEW: Added SVG support. Thanks to Simon Maillard.
  • Pre WP 3.6: jQuery 1.9+ compatibility
  • JQuery Mousewheel extension update to 3.1.3
  • NEW: Elegant Themes compatibility
  • Some small Touch device compatibility improvement hacks to the 1.3.4 script
  • Major plugin overhaul: Class implementation
  • NEW: Disable hide on overlay click
  • NEW: Allow automatic resizing to large image size set on Settings > Media during media upload via the hidden WordPress function media_upload_max_image_resize() TODO test more!
  • NEW Options: iFrame scrolling, autoScale, key navigation/close, cyclic galleries
  • Metadata custom parameters and Mousewheel gallery scrolling scripts optional
  • Basic RTL languages/text direction support (gallery navigation inversion, title position)
  • BUGFIX: https in stylesheet on Windows IIS
  • Improved W3TC compatibility: query string issue
  • Gravity Forms in ajax mode compatibility
  • Use jQuery’s bind(‚ready‘) for better ajax content compatibility
  • Dynamic stylesheet response headers to allow browser caching
  • Minified version of jquery.metadata.js
  • Auto-detect on image map areas
  • nolightbox class for menu items
  • SECURITY: Settings sanitization
  • BUGFIX: load_textdomain firing after the main settings array is loaded, leaving text strings in it untranslated.
  • BUGFIX: missing signs in Youtube url regular expression
  • BUGFIX: unquoted rel attribute selectors in jquery.fancybox-1.3.4.js
  • BUGFIX: broken url path in IE stylesheet when missing $_SERVER[‚SERVER_NAME‘]
  • BUGFIX: easing extension not needed on linear easing

1.3.4.9

  • NEW: Lithuanian translation
  • NEW: Hindi translation
  • NEW: Indonesian translation
  • NEW: Romanian translation
  • NEW: Polish translation
  • NEW: Spanish translation
  • NEW: jQuery Metadata support
  • NEW: Image map AREA support for all content types
  • NEW: new iFrame/HTML5 embed code for YouTube, Vimeo and Dailymotion
  • NEW: fix WordPress Dailymotion auto-embed code missing wmode
  • Some changes to default settings
  • Updated Dutch translation
  • BUGFIX: Opening speed

1.3.4.8

  • NEW: Advanced option: Gallery auto-rotation
  • NEW: Spotlight effect
  • Improved auto-enable and auto-gallery settings
  • BIGFIX: CSS IE6 hack
  • BIGFIX: PDF object in IE7

1.3.4.6

  • PDF embed compatibility improvement
  • NEW: Show/hide title on mouse hover action
  • NEW: Auto-gallery modes (Disabled, page/post images only, all)
  • NEW: Dailymotion support
  • Links with id fancybox-auto will be triggered on page load
  • Anything with class fancybox-hidden“ will be hidden
  • Support for menu items in iframe
  • Added class nofancybox for exclusion when auto-enabling

1.3.4.5

  • FancyBox script version 1.3.4 (2010/11/11 – http://fancybox.net/changelog/)
  • NEW: Support for PDF
  • NEW: Easing options
  • YouTube, Vimeo and iFrame options adjustable
  • lots and lots of more options!
  • BIGFIX: work-around for missing wmode in WordPress (auto-)embedded movies (credits: Crantea Mihaita)

1.3.3.4.2

  • BIGFIX: iframe width
  • BIGFIX: image overlay size in Google Chrome browser issue (FancyBox 1.3.3)
  • BIGFIX: fancybox-swf

1.3.3.4

  • FancyBox script version 1.3.3 (2010/11/4 – http://fancybox.net/changelog/)
  • Vimeo support
  • YouTube Short URL support (disabled by default)
  • Auto-recognition and seperate class fancybox-youtube for YouTube
  • Auto-recognition and seperate class fancybox-vimeo for Vimeo

1.3.2

  • FancyBox script version 1.3.2 (2010/10/10 – http://fancybox.net/changelog/)

1.3.1.3

  • translation .pot file available
  • Dutch translation
  • NEW: YouTube and Flash movie support
  • NEW: Iframe support
  • added option Auto-enable for…

1.3.1.2

  • added option titlePosition : over / inside / outside
  • added option transitionIn : elastic / fade / none
  • added option transitionOut : elastic / fade / none

1.3.1.1

  • small jQuery speed improvement by chaining object calls

1.3.1

  • Using FancyBox version 1.3.1