WordPress-Light-Box:
6 Plug-ins im Vergleich!

Bild von kmxpeterx172
Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
"Classic und TinyMCE – ist so klasse!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit TinyMCE Advanced
"Classic und TinyMCE – ist das ausgezeichnete!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
"Classic und TinyMCE – ist so sehr gut !"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
"Classic und TinyMCE – und tut sehr gut!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

TinyMCE aktive Installationen: 2+ Millionen
"Classic und TinyMCE – ist so fabelhaft!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
"Classic und TinyMCE – ist de luxe!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
"Classic Widgets – sind so grandiose!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-8a

Werkraum ist Werkraum und Frontend ist Frontend
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Classic und TinyMCE – ist so fein!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Eine Light-Box ist für Bilder im Overlay zu öffnen. Das ist allemal von Komfort und sehr schön und meist in Reihe durch 'Weiter Button' zu sehen. Auch Plug-in mit Diashow und so individuelles, die Bilder noch mal vergrößern, ist da und dort im Programm.

Die Informationen zu Plug-ins Light-Box:

In der Übersicht so mal der Überblick in Tabelle. Welches die meisten Plug-ins ∴nicht∴ so beinhalten, ist ein SVG in der Light-Box zu öffnen. Im Ersten der Kategorie ist das mit WP-Featherlight, das ist ein JavaScript Plug-in, welches darauf abzielt, so klein wie möglich zu sein. Deshalb bietet es auch fast keine Features, ist aber in fast allen Browsern verwendbar. Das geht dann bis zum Plug-in Easy FancyBox, welches unterhalb noch mal hervorgehoben ist. Im Zweiten sind da Plug-in für Fotografen, welche die EXIF-Daten zeigen können.

Datei-größeInstal-lationenDiashowVorheriges / Nächstes BildBenutzerdef. Stylesheet
WP Featherlight198 KB70.000+NeinNeinNein
Responsive Lightbox Lite215 KB20.000+Nein / Pro und mehrNein / ProNein /Pro
WP jQuery Lightbox563 KB60.000+JaJaJa
Simple Lightbox839 KB200.000+Ja + GruppierungJa +Nein / 2 Themes und Individuelles.
WP Lightbox 21,4 MB60.000+NeinJaNein
Easy FancyBox1,6 MB300.000+ Das muss…man sich… ansehen.

Der Fotografen mit EXIF-Daten

Meow Lightbox. 1,5 MB, 4000+ aktive Installationen.

Für Fotografen EXIF-Informationen anzeigen samt SVG in der Light-Box.

Sehr hervorzuheben ist da das Plug-in …

PhotoSwipe

Lightbox mit PhotoSwipe. 569 KB, 10.000+ aktive Installationen.

Erstklassig. Das Plug-in für Fotografen, der Bilder samt EXIF-Daten in ansprechenden Designs zu bieten. Auch SVG in der Light-Box. Sehr sehenswert! – Man hört das von wegen EXIF-Daten bräuchten die Profis gar nicht, denn des Bilds selbst von der Aufnahme her sind die Daten herauszulesen, also so aus dem, wie das Bild visuell ist. Nur so Anmerkung hier, aber so für sich ist das mit den EXIF-Daten sehr von Vorteil!

… Und das muss man sich angesehen haben

Das Plug-in Easy FancyBox. Der Einstellung sind von Dashboard → Einstellungen› Medien und von da siehe unterhalb 'FancyBox'. – und lass dich von der Vielfalt da nicht umhauen! 

Easy FancyBox Einstellungen › Medien
… lass dich von der Vielfalt da nicht umhauen! – das nur so als Symbolbild.

Easy FancyBox. Das Plug-in ist zur Wiedergabe für beinahe alle Medien-Links samt SVG. Darüber hinaus ist das Plug-in für ideelle Anwendung. … Infolge sind hier so Info, die den Durchblick im Anfang erleichtern.

Im weiter von Beschrieb des Plug-in auf WordPress.ORG ist da nun der Fokus das mit der Überlagerung.

Die Überlagerung

Dashboard → Einstellungen› Medien, FancyBox da bei 'Überlagerung'.

Die Überlagerung ist welcher Bereich, der mit der Box herum visuell ist. Also die 'Überlagerung' ist wie die Box vor dem Inhalt der Website der Bereich um die geöffnete Box.

Des Plug-ins 'Easy FancyBox' und 'Überlagerung'
  • Dem Häkchen bei Überlagerung (1) 'Zeige die Überlagerung …' ist gleich darunter das Häkchen 'Fancy Box schließen…'. Sind beide aktiv, so wird mit Klick in die Box oder in des Inhalts herum das Overlay beendet.
    • Hinweis: Bei Bild SVG ist das mit Klick in die Box aber nicht und so ist das nur anklicke, Overlay-Hintergrund zu schließen.
  • Sind da bei Überlagerung (1) aber keine Häkchen so bedingt das ein Häkchen bei Fenster / Design (2). Denn sonst ist im Frontend das Overlay nicht zu schließen. Sind hingegen die Häkchen bei Überlagerung (1), so braucht für Fenster bei (2) Design, das nicht sein.
Easy FancyBox-überlagerung-fenster
Die Einstellung zur Überlagerung / Fenster regelt das Ausblenden des Overlays im Frontend.

Die Beschriftung der Bilder und Easy FancyBox

Bei Bild-Details, die Bildbeschriftung ist da mit Easy FancyBox nicht durch das Caption. Da bietet sich das durch 'Alternativer-Text' (1) oder 'Bild title-Attribut' (2). Das mit 'Alternativer-Text' (1) ist für die Bilder ohnedies in Empfehlung und somit kann hier auch die Beschriftung sein.

Bild-Details-alt-text-title-attribut
Die Bildbeschriftung ist mit Easy FancyBox nicht durch das Caption.

Soll die Beschriftung aber anders ausfallen als im 'Alternativer-Text' (1), so ist dies über 'Bild title-Attribut' (2). Aber des Letzteren ist das mit dem 'Bild title-Attribut' (2) eher für Bild mit anderem Link, als das Bild ist und das 'Bild title-Attribut' (2) soll zeigen, wohin der Link führt.

Nun das Beispiel:

Schöne Wolken
Wolken. SVG-Bild von k-images. Mouseover und siehe erst das 'st beiden Felder ein Text, so folgt anklicke die Beschriftung nach 'Bild title-Attribut' (2).
Stehenbleiben! … ich hab meinen Hut verloren.
Bild FILMTOAST.de "Stehenbleiben! …" Hingegen anklicke hier folgt die Beschriftung dem 'Alternative Text' (1), da das 'Bild title-Attribut' (2) leer ist. … Weiter siehe nächst Überschrift.
Einstellung Easy FancyBox

Dazu der Einstellung Easy FancyBox unter Bilder sind beide Häkchen, so folgt die Beschriftung über 'Alternativer-Text' (1), aber nur wenn unter 'Bild title-Attribut' kein Eintrag ist.

Easy FancyBox-bilder-design-alt-text-title-attribut
Der Einstellung Easy FancyBox unter Bilder wie SVG sind beide Häkchen …

Wenn aber von Bild-Details der 'Alternative Text' (1) nicht die Beschriftung sein soll, so ist darunter das Häkchen bei 'Erlaube den Titel vom Alt-Attribut' nicht zu setzen. Im Grunde zeigt Easy FancyBox welchen Text von 'Bild title-Attribut' (2) eingegeben ist. Sind beide angehakt, so forciert Easy FancyBox das 'Bild title-Attribut' (2). Und das im 'Alternative Text' (1) ist dann visuell, wenn im 'Bild title-Attribut' (2) kein Eintrag ist.

Ein bspw so eher nicht!

Wenn die Beschriftung nicht so sein soll wie das im Bild-Details 'Alternative Text' ist (1). So ist bei FancyBox 'Erlaube den Titel vom Alt-Attribut des Vorschaubildes' nicht anzuhaken. Der erwünschte Text zur Beschriftung ist dann Bild-Details bei 'Bild title-Attribut' (2) einzutragen.

Die Beschriftung soll anders sein als das im 'Alternative Text' (1), … so ist bei FancyBox 'Erlaube den Titel vom Alt-Attribut des Vorschaubildes' nicht anzuhaken. Diesem Pseudo-Beispiel hier ist eben beiden Felder kein Text.

Dasselbe würde auch so für ohne Beschriftung des Bilds geeignet. So eben bei Bild-Details 'Bild title-Attribut' (2) kein Text ist.

Zum Fazit der Beschriftung von Bild!

Der Webmaster wird des meist in Bild-Details die 'Alt-Attribute' schon gesetzt haben und wenn die Beschriftung zum Bild des anders ist, so kann dann die Beschriftung über 'Bild title-Attribut' (2) sein. – aber besser so nicht!

  • Von Vorteil ist die Beschriftung in 'Alternative Text' (1) und das 'Bild title-Attribut' (2) leer zu lassen.

Denn des Letzteren ist das mit dem 'Bild title-Attribut' (2) für Bild mit anderem Link, als das Bild ist und das 'Bild title-Attribut' (2) soll zeigen, wohin der Link führt.

Das hier mit der Bildbeschriftung zu texten, ist nicht so leicht. Für den einen ohnehin intuitiv erfassbar ist es für den andern des Anfangs nicht so einfach …

Inline Inhalte

Im Folgenden ist das nur nach den FAQ des Plug-ins.

Zum Beispiel

Zum Inline Inhalt ist hier statt Text so Shortcode nach Belieben.

<div class="fancybox-hidden" style="display: none;">
<div id="fancyboxID-2" class="hentry" style="width: 460px; max-width: 100%;">
[the id = "2"]
</div>
</div>
<a class="fancybox-inline" href="#fancyboxID-2"><button style="width: 474px; max-width: 100%; padding: 15px;">Anklickt zur Schau</button></a>

Des Beispiels als E-Mail:

…und so wie hier  → Kontakt-Formular.

  1. Der Einstellung Easy FancyBox 'Media' das mit Inline-Inhalte anhaken.
  2. Dann unten bei 'Inline Inhalte' ist das weiter:
    • Bei "Versuche die Größe den Inline/HTML-Inhaltes anzupassen…" dort evtl. kein Häkchen und
    • bei "FancyBox schließen, sobald auf den Inhalt geklickt wird" jedenfalls ohne Häkchen, wenn Kontakt-Formular oder so anderes Formular, wo der Besucher etwas eintragen kann.
  3. Der Seite oder des Beitrages im Editor Text
    <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>
Bemerkung für 'Inline Inhalte' zum Übergang

So Spielereien wie hier (mit Plug-in 'Ditty News Ticker') und das ist, anklicke des Buttons zu sehen:

Wie das? – so fliege in den Wolken. Siehe dort das oberhalb.

Zur richtigen Darstellung von so was das funktioniert der Einstellung:

Easy FancyBox. Inline, Übergang In Ein / Ausblenden
Dem Beispiel nach, das funktioniert!

…und ∴nicht richtig∴ der Einstellung:

Easy FancyBox. Inline, Übergang In Elastic
Dem Beispiel nach, das funktioniert nicht!

Das ist so Kleinigkeit und mag nur gut zu wissen sein.


Das HTML von obigem Beispiel:

<div class="fancybox-hidden" style="display: none;">
<div id="fancyboxID-1" class="hentry" style="width: 625px; max-width: 100%;">
<p style="margin-top: 80px;">
k-images-wolken-resp
k-images-wolken-resp-nr2
</p> Mouseover das Flugzeug … <div class="image-mouseover-flug" style="float: right; margin: -250px 120px 0 0;" data-hoverioaudio=""> <img class="before alignnone" src="https://wegerl.at/wp-content/uploads/2021/03/OC-V-flugz-2-orig.svg" alt="" width="180" height="79" /><img class="after alignnone" style="margin-bottom: 2px;" src="https://wegerl.at/wp-content/uploads/2021/03/OC-V-flugz-2-propeller-ohne-opac80.svg" alt="" width="180" height="79" /><img class="after myrox" src="https://wegerl.at/wp-content/uploads/2021/03/OC-V-flugz-2-propeller-solo.svg" alt="" width="180" height="79" /> <audio><source src="https://wegerl.at/wp-content/uploads/2021/02/salamisound-8112066-einmotoriges.mp3" /></audio> </div> </div> </div>

So Spielereien der Animation u.a. ist im Titel Mit CSS Hover-Effekt zum Bildwechsel + Audio mit JS.

Da bei 'Weitere' Automatisches Pop-up

Sehr großzügig ist das Plug-in, aber das mit "Automatisches Pop-up" ist der Pro-Version. Hierzu ist dann der Plug-in-Support zuständig.


Anders? – so mit Pop-up

Siehe zum Beitrag Pop-up! – okay so


WP-Gallery in Easy FancyBox

Für die Bilder ist die Ansicht von Mobil / Handy nicht vorteilhaft. Darum bei FancyBox / Weitere, da bei "Browser& Geräte Kompatibilität" die Mindestbreite des Viewports, so auf 640px einstellen.


Aktualisiert im Jahr 2022-September