Auf der Spur von Lightbox

Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit TinyMCE Advanced

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.

Info echo
OpenClipart-Vectors-katze-4

TinyMCE aktive Installationen: 2+ Millionen

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-8a

Werkraum ist Werkraum und Frontend ist Frontend

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 Pop-up 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 …

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 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

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!

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 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.
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 geben werden. Soll die Beschriftung aber anders ausfallen als im 'Alternativer-Text' (1), so ist dies über 'Bild title-Attribut' (2).

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

Infolge das Beispiel:

Schöne Wolken
Wolken. SVG-Bild von k-images. Ist beiden Felder ein Text, so folgt im anklicke die Beschriftung nach 'Bild title-Attribut' (2). Weiter siehe nächst Überschrift.
Stehenbleiben! … ich hab meinen Hut verloren.
Bild FILMTOAST.de "Stehenbleiben! …" Im anklicke folgt hier die Beschriftung dem 'Alternative Text' (1), da das 'Bild title-Attribut' (2) leer ist.
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 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 = "2"]
</div>
</div>
<a class="fancybox-inline" href="#fancyboxID-2"><button style="width: 474px; max-width: 100%; padding: 15px;">Anklickt zur Schau</button></a>

…oder 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 Kontaktformular oder so Formular ist, wo der Besucher etwas eintragen kann.
  3. 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 ist im anklicke des Buttons zu sehen:

Zur richtigen Darstellung von so was das funktioniert der Einstellung:

Easy FancyBox. Inline, Übergang In Ein / Ausblenden

…und nicht richtig der Eistellung:

Easy FancyBox. Inline, Übergang In Elastic

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 Pop-up empfiehlt sich das Plug-in Boxzilla.

Von wegen Erfolg ist so Pop-up nicht. Tja, das mit den Pop-ups ist meist mit Kritik belegt. Und ja, so Pop-up 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 Pop-up 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-Pop-up?" Da war beim Verlassen der Seite das Pop-up 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-Pop-up?"

Von 23 Stimmen das

Wie gut findest du so ein Exit-Popup?

Mit Plug-in Boxzilla ist hier das Pop-up nun prompt beim Besuch der Website. Das ist als Begrüßung und so zur Umfrage einladet! Das Voten selbst ist da gleich im Pop-up von Vorteil. Und durch ein Cookie hat das im weiter der Website nicht zu sein. Es kommt ganz gut das Pop-up 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.

… Und wie ist dein Erfolg des Beitrags?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

DSGVO: Blog Website wegerl.at bedient sich dem Dienst Gravatar der Automattic Inc. In Angabe der E-Mail-Adresse, welche deiner Nutzung von Gravatar, erfolgt der Service nach Art. 6 Abs. 1 lit. f) DSGVO. Also nachdem dein Kommentar von wegerl.at freigegeben wurde, ist dein Profilbild öffentlich im Kontext deines Kommentars sichtbar.