Eine Lightbox 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. Weiter im Kontext (Umfeld) ist hier dann noch so Popup Plug-in dabei.
Die Informationen
In der Übersicht so mal der Überblick in Tabelle. Welches die meisten Plug-ins ∴nicht∴ so beinhalten, ist ein SVG in der Lightbox zu öffnen. Im Ersten der Kategorie ist das mit WP-Featherlight, das ist ein JavaScript Plugin, 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 Lightbox.
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 Lightbox. Sehr sehenswert! – 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 klasse!
… Und das muss man sich angesehen haben
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. Der Einstellung sind von Dashboard → Einstellungen › Medien und von da siehe unterhalb FancyBox.
… Infolge sind hier so Info, die den Durchblick im Anfang erleichtern. Im weiter von Beschrieb des Plug-in auf WordPress.ORG ist da der Fokus das mit der Überlagerung hervorzuheben.
Die Überlagerung
Dashboard → Einstellungen › Medien, FancyBox da bei Überlagerung.
Der Easy FancyBox Einstellung zur Überlagerung regelt das Ausblenden des Overlay-Hintergrunds. Die hier sogenannte ‚Überlagerung‘ ist der Bereich um das geöffnete Overlay, also Overlay-Hintergrund.
- 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 im 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 geben werden. Soll die Beschriftung aber anders ausfallen als im ‚Alternativer-Text‘ (1), so ist dies über ‚Bild title-Attribut‘ (2).
Infolge 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 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.
- Im Grunde aber ist die Beschriftung da in ‚Alternative Text‘ (1) von Vorteil und das ‚Bild title-Attribut‘ (2) leer zu lassen.
Denn des Letztren ist das mit dem ‚Bild title-Attribut‘ (2) so 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 dem FAQ des Plug-ins.
Zum Beispiel
Zum inline Inhalt ist hier statt Text so Shortcode vom und zum ⇔ Poll-Plug-in Modern Polls.
<div class="fancybox-hidden" style="display: none;">
<div id="fancyboxID-2" class="hentry" style="width: 460px; max-width: 100%;">
[[mpp id = "1"]]
</div>
</div>
<a class="fancybox-inline" href="#fancyboxID-2"><button style="width: 474px; max-width: 100%; padding: 15px;">Anklickt zur Schau</button></a>
- 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 Kontaktformular oder so Formular ist, wo der Besucher etwas eintragen kann.
- Der Seite oder des Beitrages im Text-Tab.
<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 im anklicke des Buttons zu sehen ist:
Zur richtigen Darstellung von so was das funktioniert der Einstellung:
…und nicht richtig der Eistellung:
Das ist so Kleinigkeit und mag nur gut zu wissen sein.
Da bei ‚Weitere‘ Automatisches Popup
Sehr großzügig ist das Plug-in, aber das mit „Automatisches Popup“ ist der Pro-Version. Hierzu ist dann der Support.
Anders? …
Für so Popup empfiehlt sich das Plug-in Boxzilla.
Von wegen Erfolg ist so Popup nicht. Tja, das mit den Popups ist meist mit Kritik belegt. Und ja, so Popup sollten nicht zur Eigenwerbung sein, das ist nicht das. Bitteschön, wenn mal so Angebot von News-Letter oder so solls recht sein. Aber für Umfrage, welche dann jeden anspricht, da ist ein Popup schon sehr von nutzen! Denn, so Umfrage in Seitenleiste, die ignoriert fast jeder. Wir alle haben es eilig, wenn man sucht, da gehts dann ab … da und DA! – und weg. „Erkenne dich selbst“.
Bspw mal der Frage „Wie gut findest du so ein Exit-Popup?“ Da war beim Verlassen der Seite das Popup mit der Einladung zum Voten. Und dazu musste erst noch zu der Seite mit dem Poll geklickt werden. Sehr umständlich das und dennoch war relativ kurzer Zeit das Ergebnis. Also der Umfrage „Wie gut findest du so ein Exit-Popup?“
Von 23 Stimmen das
Mit Plug-in Boxzilla ist hier das Popup nun prompt beim Besuch der Website. Das ist als Begrüßung und so zur Umfrage einladet! Das Voten selbst ist da gleich im Popup von Vorteil. Und durch ein Cookie hat das im weiter der Website nicht zu sein. Es kommt ganz gut das Popup im Vorhinein, als wenn man schon die Seite verlassen möchte und noch mal aufgehalten ist.
- In Boxilla sind nur paar Einstellungen inkl. das mit Cookies.
So CSS eventuell
/* Boxzilla overlay background */
.boxzilla-overlay {background: #355CAB !important;
opacity: 0.2 !important;
}
/* Boxzilla Scrollbar small */
.boxzilla::-webkit-scrollbar {
width: 6px;
}
.boxzilla::-webkit-scrollbar-track {
box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
border-radius: 5px;
}
.boxzilla::-webkit-scrollbar-thumb {
border-radius: 5px;
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
/* Boxzilla POPUP schütteln */
.boxzilla {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
animation-name: wobble;
}
@keyframes wobble {
from {
transform: none;
}
15% {
transform: translate3d(-21%, 0, 0) rotate3d(0, 0, 1, -5deg);
}
30% {
transform: translate3d(18%, 0, 0) rotate3d(0, 0, 1, 3deg);
}
45% {
transform: translate3d(-12%, 0, 0) rotate3d(0, 0, 1, -3deg);
}
60% {
transform: translate3d(6%, 0, 0) rotate3d(0, 0, 1, 2deg);
}
75% {
transform: translate3d(-3%, 0, 0) rotate3d(0, 0, 1, -1deg);
}
to {
transform: none;
}
}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.
