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öße | Instal-lationen | Diashow | Vorheriges / Nächstes Bild | Benutzerdef. Stylesheet | |
| WP Featherlight | 198 KB | 70.000+ | Nein | Nein | Nein |
| Responsive Lightbox Lite | 215 KB | 20.000+ | Nein / Pro und mehr | Nein / Pro | Nein /Pro |
| WP jQuery Lightbox | 563 KB | 60.000+ | Ja | Ja | Ja |
| Simple Lightbox | 839 KB | 200.000+ | Ja + Gruppierung | Ja + | Nein / 2 Themes und Individuelles. |
| WP Lightbox 2 | 1,4 MB | 60.000+ | Nein | Ja | Nein |
| Easy FancyBox | 1,6 MB | 300.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 …
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. 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.
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.
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:
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.
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.
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.
- Der Einstellung Easy FancyBox 'Media' das mit Inline-Inhalte anhaken.
- 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.
- 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:
…und ∴nicht richtig∴ der Einstellung:
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;"></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
Wird geladen ...