Werbung

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter.

Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.

---

Werbung

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.

Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.

---

Werbung

Einfach und intuitiv –
Der Classic-Editor für alle.

Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.

---

Werbung

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.

Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.

---

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.

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, 7000+ aktive Installationen.

Für Fotografen EXIF-Informationen anzeigen samt SVG in der Light-Box.

Sehr hervorzuheben ist das Plug-in …

Lightbox mit PhotoSwipe. 569 KB, 20.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.

Hier der Website ist das Beispiel WP Featherlight in Anwendung:

Minimalistische Lightbox: Featherlight – Leistungsstark

… Und das sollte man sich angesehen haben

Dennoch möchte ich darauf hinweisen, 1. dass die folgenden Einstellungen nicht mehr in ihrer ursprünglichen Form vorliegen. 2. Die speziellen Beispiele sind nicht mehr funktionell, da das Plug-in hier der Website nicht mehr verwendet wird.

Ein Plug-in, das man sich ansehen sollte, ist Easy FancyBox, 200.000+ aktive Installationen. 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 Plug-in, 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-Plug-ins 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;">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: (Beispiele sind nicht funktionell.)

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: (Beispiele sind nicht funktionell.)

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.

Der Beitrag wurde mit fachlicher Unterstützung erstellt.

Aktualisiert im Jahr 2024 Mai