Willkommen beim WP Wegerl.at 'Lesemodus'!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus.
smilies.4-user.de

WordPress-Light-Box:
6 Plug-ins im Vergleich!

Bild von kmxpeterx172
Werbung

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


Erleben Sie den Classic Editor neu!
(Bilder von pixelcreatures)


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.


Classic Editor + Advanced Editor Tools
= Ihr Erfolgsrezept


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


Classic Editor & Advanced Editor Tools
Erleben Sie es.


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.


Optimieren Sie Ihre Bearbeitung:
Advanced Editor Tools


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





Info echo1 OpenClipart-Vectors-katze-1
Ist der Classic-Editor zu kennen? –
Versäume bitte nicht den Advanced Editor! Blick in die Zukunft: Advanced Editor Tools
Info echo2 OpenClipart-Vectors-katze-2
Classic-Editor – Classic Widgets
"Innovativ und ausgezeichnet!" Hauch von Nostalgie: Classic Widgets
Info echo3 OpenClipart-Vectors-katze-3
Klassischen Editor! – und …
"Advanced Editor Tools" Dauerhaft dynamisch: Advanced Editor Tools
Info echo4 OpenClipart-Vectors-katze-7
… die Welt gehört dem, der sie genießt.
– mit Classic Editor und Advanced Tools! Advanced Editor Tools und Classic Widgets
Info echo5 OpenClipart-Vectors-katze-4
Aktive Installationen: 2+ Millionen
"Advanced Editor Tools – ist fabelhaft!" Unverändert exzellent: Advanced Editor Tools
Info echo6 OpenClipart-Vectors-katze-5
Antörnend! – hier zur Lancierung
"Advanced Editor Tools – ist de luxe!" Classic Editor und Advanced Editor Tools
Info echo7 OpenClipart-Vectors-katze-6
Classic Widgets sind innovativ!
"Classic Widgets – sind modern!" Advanced Editor ToolsClassic Widgets
Info echo8 OpenClipart-Vectors-katze-8a
"Werkraum ist Werkraum"
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Frontend ist Frontend!" Classic Editor und Advanced Editor Tools

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.

Datei-größeInstal-lationenAutomatische
Diashow
Vorheriges / Nächstes BildBenutzerdef. Stylesheet
WP Featherlight198 KB70.000+NeinJaNein
Responsive Lightbox Lite215 KB20.000+Nein / Pro und mehrNein / ProNein /Pro
WP jQuery Lightbox563 KB60.000+JaJaJa
Simple Lightbox839 KB200.000+Ja + GruppierungJaNein / 2 Themes und Individuelles.
WP Lightbox 21,4 MB60.000+NeinJaNein
Easy FancyBox1,6 MB300.000+ Das muss…man sich… ansehen.

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 …

PhotoSwipe

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 muss man sich angesehen haben

Und es ist anpassungsfähig. Dennoch möchte ich darauf hinweisen, dass die folgenden Einstellungen nicht mehr in ihrer ursprünglichen Form vorliegen. Die speziellen Beispiele sind nicht mehr funktionell, da das Plug-in nicht mehr verwendet wird.

Ein Plug-in, das man sich unbedingt 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 Einstellungen › Medien
… lass dich von der Vielfalt da nicht umhauen! – das nur so als Symbolbild.

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.
Easy FancyBox-überlagerung-fenster
Die Einstellung zur Überlagerung / Fenster regelt das Ausblenden des Overlays im Frontend.

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.

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

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:

Schöne Wolken
Wolken. SVG-Bild von k-images. Mouseover und siehe erst das 'st beiden Felder ein Text, so folgt anklicke die Beschriftung nach 'Bild title-Attribut' (2).
Stehenbleiben! … ich hab meinen Hut verloren.
Bild FILMTOAST.de "Stehenbleiben! …" Hingegen anklicke hier folgt die Beschriftung dem 'Alternative Text' (1), da das 'Bild title-Attribut' (2) leer ist. … Weiter siehe nächst Überschrift.
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.

Easy FancyBox-bilder-design-alt-text-title-attribut
Der Einstellung Easy FancyBox unter Bilder wie SVG sind beide Häkchen …

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.

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.

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:

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

Wie das? – so fliege in den Wolken. Siehe dort das oberhalb.

Zur richtigen Darstellung von so was das funktioniert der Einstellung:

Easy FancyBox. Inline, Übergang In Ein / Ausblenden
Dem Beispiel nach, das funktioniert!

…und ∴nicht richtig∴ der Einstellung:

Easy FancyBox. Inline, Übergang In Elastic
Dem Beispiel nach, das funktioniert nicht!

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;">
k-images-wolken-resp
k-images-wolken-resp-nr2
</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