Info echo

Ist der Classic-Editor schon zu kennen? –

"Advanced Editor Tools – ist so klasse!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

---

Info echo

Anklickt Classic-Editor mit Advanced Editor Tools

"Advanced Editor Tools – ist das ausgezeichnete!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

---

Info echo

Klassischen Editor anwenden! – und …

"Advanced Editor Tools – ist so sehr gut !"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

---

Info echo

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

"Advanced Editor Tools – und tut sehr gut!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

---

Info echo

Advanced Editor Tools aktive Installationen: 2+ Millionen

"Advanced Editor Tools – ist so fabelhaft!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

---

Info echo

Ansprechend! – so gehts hier zur Lancierung

"Advanced Editor Tools – ist de luxe!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

---

Info echo

… und NEU! – Classic Widgets

"Classic Widgets – sind so grandiose!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

---

Info echo

Werkraum ist Werkraum und Frontend ist Frontend

Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker

"Advanced Editor Tools – ist so fein!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

---

Lightboxes (Light-Box) sind besonders praktisch, wenn es darum geht, große Bilder oder Fotosammlungen auf einer Website oder in einer App zu präsentieren. Durch das Overlay-Design wird der Fokus auf das Bild gelegt, während die Umgebung in den Hintergrund tritt. Lightboxes sind besonders praktisch, wenn es darum geht, große Bilder oder Fotosammlungen auf einer Website oder in einer App zu präsentieren.

Die Informationen
zu Plug-ins Light-Box:

In Bezug auf Lightbox-Plug-ins gibt es eine Vielzahl von Optionen auf dem Markt. Eine Funktion, die jedoch nicht in allen Plug-ins enthalten ist, ist die Möglichkeit, SVG-Dateien in der Lightbox zu öffnen. WP-Featherlight ist ein JavaScript-Plug-in, das darauf abzielt, so klein wie möglich zu sein und somit fast keine Features bietet, aber in fast allen Browsern verwendet werden kann. Es gibt auch Plug-ins für Fotografen, die in der Lage sind, EXIF-Daten anzuzeigen. Ein empfehlenswertes Plug-in ist Easy FancyBox. Eine Tabelle bietet einen Überblick über die verschiedenen Plug-ins.

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! – Manche sagen, dass Profis keine EXIF-Daten brauchen, da sie die Informationen aus dem Bild selbst ablesen können. Doch die EXIF-Daten sind dennoch sehr nützlich, da sie neben den Informationen über die Kameraeinstellungen, den Standort oder das Aufnahmedatum enthalten können. Diese Informationen können später beim Sortieren, Kategorisieren und Archivieren der Bilder hilfreich sein. Darüber hinaus können sie auch für den Austausch von Informationen zwischen Fotografen und anderen Beteiligten an einem Projekt nützlich sein.

… Und das muss man sich angesehen haben

Ein Plug-in, das man sich unbedingt ansehen sollte, ist Easy FancyBox. Um es einzurichten, geht man zu Dashboard → Einstellungen › Medien und scrollt dann nach unten zu 'FancyBox'. Die Einstellungsmöglichkeiten sind sehr vielfältig, also lass dich nicht davon überwältigen!"

Easy FancyBox ist ein Plugin, das fast alle Arten von Medien-Links, einschließlich SVG, wiedergeben kann. Darüber hinaus ist das Plug-in für ideelle Anwendung auch für nicht-kommerzielle Zwecke geeignet. Hier sind einige Informationen, die den Einstieg erleichtern.

Des Easy FancyBox-Plugins dem eigenen Beschrieb folgend zur Überlagerungsfunktion. Im weiter von Beschrieb des Plug-in auf WordPress.ORG ist da nun der Fokus das mit der Überlagerung.

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

Die Überlagerung ist der Bereich, der visuell um die Box herum liegt. Sie ist wie eine Box vor dem Inhalt der Website und umgibt die geöffnete Box.

Easy FancyBox und das mit der 'Überlagerung'

Im unteren Bereich der Einstellungen befindet sich die Option 'Überlagerung'. Wenn das Häkchen bei 'Zeige die Überlagerung…' aktiviert ist, befindet sich darunter ein weiteres Häkchen 'FancyBox schließen…'. Wenn beide aktiviert sind, wird das Overlay beim Klicken in die Box oder in den Inhalt beendet.

• Dem Häkchen bei Überlagerung (1) 'Zeige die Überlagerung …' ist gleich darunter das Häkchen 'Fancy Box schließen…'. Wenn beide aktiviert sind, wird das Overlay beim Klicken in die Box oder in den Inhalt beendet.
  • Bei einem SVG-Bild wird das Overlay durch Anklicken des Hintergrunds, nicht jedoch durch Anklicken der Box geschlossen.
• Wenn kein Häkchen bei der Überlagerungsoption (1) gesetzt ist, muss ein Häkchen bei der Fenster-/Designoption (2) gesetzt werden, da sonst das Overlay im Frontend nicht geschlossen werden kann. Wenn hingegen das Häkchen bei Überlagerung (1) gesetzt ist, ist ein Häkchen bei Fenster/Design (2) nicht erforderlich.

Beschriftung von Bildern mit Easy FancyBox

Die Bildbeschriftung bei Easy FancyBox wird nicht durch das Caption-Attribut realisiert. Stattdessen bietet es sich an, den Alternativtext (1) oder das Titelattribut (2) zu verwenden. Es ist ohnehin empfehlenswert, Bilder mit einem Alternativtext zu versehen, der beschreibt, was auf dem Bild zu sehen ist. Das Titelattribut (2) wird eher verwendet, wenn das Bild mit einem Link versehen ist, um anzuzeigen, wohin der Link führt.

Wenn die Beschriftung vom Alternativtext abweichen soll, kann das Titelattribut (2) verwendet werden. Aber mochmals! – das Titelattribut (2) ist in erster Linie für Bilder mit einem Link gedacht und soll zeigen, wohin der Link führt.

Nun das Beispiel:

Einstellunen für Easy FancyBox

Unter den Einstellungen für Easy FancyBox für Bilder gibt es zwei Häkchen. Wenn beide Häkchen aktiviert sind, wird die Beschriftung aus dem "Alternativer-Text" (1) genommen, aber nur dann, wenn im Feld "Bild title-Attribut" (2) kein Eintrag vorhanden ist.

Wenn die Bildbeschriftung jedoch nicht aus dem "Alternativer-Text" (1) stammen soll, darf das Häkchen bei "Erlaube den Titel vom Alt-Attribut" nicht aktiviert werden. Easy FancyBox verwendet dann den Text, der im Feld "Bild title-Attribut" (2) eingegeben wurde. Wenn beide Häkchen aktiviert sind, bevorzugt Easy FancyBox das "Bild title-Attribut" (2). Wenn im Feld "Bild title-Attribut" (2) kein Eintrag vorhanden ist, wird der Text aus dem "Alternativer-Text" (1) als Beschriftung verwendet.

Ein Beispiel, wie es nicht sein sollte!

Wenn die Beschriftung eines Bildes anders sein soll als der 'Alternative Text' (1) in den Bild-Details, sollte man nicht das Häkchen bei 'Erlaube den Titel vom Alt-Attribut des Vorschaubildes' setzen. Stattdessen kann der gewünschte Text für die Beschriftung im 'Bild title-Attribut' (2) in den Bild-Details eingetragen werden.

Dies gilt auch für Bilder ohne Beschriftung, bei denen einfach kein Text im 'Bild title-Attribut' (2) in den Bild-Details eingetragen ist.

Zum Fazit der Beschriftung von Bild!

Zusammenfassend lässt sich sagen, dass der Webmaster normalerweise bereits das "Alternative Text"-Attribut in den Bild-Details gesetzt haben sollte, und wenn die gewünschte Beschriftung vom Bild abweicht, kann diese über das "Bild title"-Attribut (2) erfolgen.

• Allerdings ist es immer besser, das "Alternative Text"-Attribut (1) für die Beschriftung zu verwenden und das "Bild title"-Attribut (2) leer zu lassen.

Das "Bild title"-Attribut (2) sollte für Bilder verwendet werden, die mit einem anderen Link versehen sind als das Bild selbst, und sollte angeben, 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.

<span style="color: #993300; font-size: 16px;">Des Beispiels als E-Mail:</span>
<p style="text-align: center;">
  <a class="fancybox-inline" href="#fancyboxID-4"
    ><button style="width: 474; max-width: 100%; padding: 15px;">
      Anklickt zur Schau
    </button></a
  >
</p>

<div class="fancybox-hidden" style="display: none;">
  <div id="fancyboxID-4" class="hentry" style="width: 460px; max-width: 100%;">
    [email]hallo@wegerl.at[/email]
  </div>
</div>
…und so wie hier →
<a class="fancybox-inline" href="#contact_form_pop">Kontakt-Formular</a>.
<div class="fancybox-hidden" style="display: none;">
  <div
    id="contact_form_pop"
    class="hentry"
    style="width: 600px; max-width: 100%; padding: 25px;"
  >
    [contact-form-7 id="205526" title="Kontaktformular 1_copy"]
  </div>
</div>

Des Beispiels als E-Mail:

Anklickt zur Schau

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

Mouseover das Flugzeug …

Und mit Klick hier, so fliege auch in den Wolken!

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