Auf der Spur von Lightbox

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

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! – 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 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 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 sein. Soll die Beschriftung aber anders ausfallen als im ‘Alternativer-Text’ (1), so ist dies über ‘Bild title-Attribut’ (2). Aber des Letztren ist das mit dem ‘Bild title-Attribut’ (2) ist eher für Bild mit anderem Link, als das Bild ist und das ‘Bild title-Attribut’ (2) soll zeigen, wohin der Link führt.

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. Mouseover und siehe erst das ‘st beiden Felder ein Text, so folgt im anklicke die Beschriftung nach ‘Bild title-Attribut’ (2).
Stehenbleiben! … ich hab meinen Hut verloren.
Bild FILMTOAST.de “Stehenbleiben! …” Hingegen im 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 Letztren 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 dem 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 Shortcode ist hier leer, also nur so bspw.

…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 Kontaktformular oder so Formular ist, 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 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 Einstellung:

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? – so mit Pop-up

…dabei ist hier scrolle

Von wegen eigen 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 … da und DA! – und weg. ‘Erkenne dich selbst’.

Bspw der Frage

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?

Plug-in Boxzilla

Mit Plug-in Boxzilla ist das Pop-up beim Besuch der Website, scrollings u. a. So beim Besuch der Website ist das als Begrüßung und so  bspw zu einer 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.

Die Einstellung und Erstellung von Pop-ups ist sehr übersichtlich und so ist man bald eingearbeitet.

  • In Boxilla sind nur paar Einstellungen inkl. das mit Cookies.

Weiter 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;
}
}

Plug-in Popup Maker

  • Boxilla hat der Dateigröße in etwa nur 10 % von ‘Popup Maker’ das so 4.1 MB.

So bspw mit Plug-in Page Loading Effects. … und so ladet Boxilla danach. Der Vorteil hingegen ‚Boxilla’ kommt das Plug-in Popup Maker mit Page Loading Effects.

Intuitiv sind die Einstellungen

Der Erstellung von Pop-ups sind mit Pop-up Maker ähnlich von Boxzilla. Doch zur Individualität ist es eher anspruchsvoll.

  • Gut zu Wissen ist da eben auch der Themen und diese sind jeweils für sich zu formatieren.
Das zum Testen …

Der Free Version ist das zum Testen im Backend nach dem Abspeichern nur einmal möglich. So ist nach jeder Änderung des Popu-ps das wieder einmal möglich. Oder:

  • Auslöser / Ereignis: ‘Beim Schließen des Popups’.
  • ‘Targeting’ eine Beitrags-ID eintragen, welche so zum TEST.

Weiter in anderem Browser, als das Backend angemeldet ist, dann den Beitrag aufzurufen. So ohne das Pop-up zu schließen ist nach jeder Änderung dort des Frontend Testseite der Browser neu zu laden. So ist auch jede Änderung gleich nachzuvollziehen. Denn das Fluchten des Inhalts von so Pop-up kann kann schön anspruchsvoll werden. – so einfach es auch sein kann.


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

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