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

Minimalistische Lightbox:
Featherlight – Leistungsstark

Bild var. jplenio
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

Die Lightbox ist ein unverzichtbares Element zur Darstellung von Bildern auf Websites. Oft genügt es, Bilder in einem etwas vergrößerten Format darzustellen und hervorzuheben. Manchmal werden Bilder auch in einer Galerie präsentiert, die dann fortlaufend betrachtet werden soll. Eine Lightbox ermöglicht dies alles mit minimalem Aufwand und einer geringen Dateigröße. Besonders für Websites, die auf Performance optimiert sind, ist dies von großem Vorteil. Auch für Websites, die bereits mit JavaScript überladen erscheinen, bietet eine leichte Lightbox-Lösung eine elegante Lösung.

Für "WP Featherlight" haben wir eine "Diashow mit Abspielen und Zeitvorwahl" entwickelt, eine Erweiterung, die die Lightbox noch besser macht. Diese Funktion ermöglicht es den Nutzern, Bilder automatisch abzuspielen und sogar die Zeit zwischen den Bildern anzupassen. Zur besseren Übersichtlichkeit der Bildanzahl ist zudem ein Bildzähler integriert. Dadurch erhöht sich die Benutzerfreundlichkeit und Flexibilität der Lightbox. 🧡


Wir haben uns verschiedene Lightbox-Plug-ins angesehen und möchten nun eines davon vorstellen: WP Featherlight – A Simple jQuery Lightbox. Das Besondere an diesem Plug-in ist seine Einfachheit, denn diese Lightbox entfaltet erst durch die Erfahrung ihr wahres Potenzial. Das Plug-in bewährt sich in technischen Herausforderungen und lässt sich dabei des CSS noch anpassen. Auch wenn keine Einstellungen verfügbar sind.


Das Bild "Eule" in der Lightbox öffnen:    Abbildung von GPJ.

Für "WP Featherlight" sind keine Einstellungen erforderlich, sodass Sie es installieren können, ohne etwas konfigurieren zu müssen. Falls Sie auf bestimmten Seiten oder Beiträgen keinen Lightbox-Effekt wünschen, können Sie ihn direkt im Editor im Widget "Veröffentlichen" deaktivieren. Das kann von Nutzen, sein, um die Plug-in-Scripte nicht zu laden, wenn man die Lightbox der Seite nicht anwendet.

Lightbox, wie selbst erstellt!

Lightbox, Sonnenstrahlen
Sonnenstrahlen

Hier präsentieren wir die Lightbox WP Featherlight, die wir an unsere eigenen CSS-Vorlieben angepasst haben. Doch nicht nur das Aussehen hat uns überzeugt, auch die technischen Aspekte machen dieses Plug-in besonders.

WP Featherlight, die Funktionsweise

  • Die Lightbox funktioniert sowohl für Einzelbilder als auch für Galerien.
  • Wenn eine Galerie definiert ist und Einzelbilder auf der Seite vorhanden sind, werden die Einzelbilder auch als solche dargestellt und nicht als Teil der Galerie.
  • Wenn mehrere Galerien auf der Seite vorhanden sind, werden sie in der Lightbox getrennt angezeigt, nicht kontinuierlich. – Ein großartiges Feature.
  • Die Lightbox verwendet Bildunterschriften, die jedem Bild vorangestellt sind und nicht den Alt-Text als Beschriftung.
Der Weg ist lang, voll Kurven und voll Steil’n, doch führt er uns am Ende mit Sicherheit zu dem Ziel.
  • In der Lightbox wird die Bildunterschrift diskret angepasst, falls sie nicht in die Breite des Bildes passt. Anstatt sie einfach umzubrechen oder abzuschneiden, wird sie geschickt durch Auslassungspunkte gekürzt. Bei Mouseover kann man die gesamte Bildunterschrift einblenden. Dies trägt zu einem eleganten Erscheinungsbild bei.

Die oben genannten Punkte sind bereits beeindruckend.

Innovation, die in jeder Lightbox leuchtet
– technisch und intuitiv.

  • Die Lightbox kann durch Klicken auf den entsprechenden Button oder außerhalb des Bildbereichs geschlossen werden. So wird ein versehentliches Schließen durch Klicken auf das Bild vermieden.
  • Die Navigationsbuttons für Vor- und Zurück in der Galerie sind jeweils am Rand platziert, sodass man entspannt durch die Galerie navigieren kann, ohne versehentlich die Lightbox zu schließen oder dem Weiter-Button folgen muss. Da Bilder oft unterschiedliche Größen haben, ändert sich der Bildbereich, aber die Buttons bleiben immer an derselben Stelle.
  • Die Integration von Cursors ist ebenfalls bemerkenswert, da Nutzer stets über ihre Interaktionen informiert bleiben. Dadurch wird der Schließen-Button fast überflüssig und könnte sogar weggelassen werden, aber gemäß den "Best Practices" gehört er dazu.

Die automatische Diashow ist nicht integriert, aber wir bieten diese Option an, wie aus den folgenden Beispielen hervorgeht.

Beispiel Lightbox Featherlight WP-Galerie

Es ist erwünscht gern mit Audio von jeplenio!

Bilder von jplenio!

Einzigartige Feinabstimmungen

Unsere Anpassungen sind rein Geschmackssache, aber sie gefallen uns und wenn du Interesse hast, kannst du sie hier sehen. Mithin ein paar Variationen.

Es bleibt immer nur die Lightbox, so wie sie sein sollte.

Das Overlay

Das Overlay der Farbe und die Opazität ist einfach anpassbar, das ist der ganze Bereich hinter dem Bild:

/* Overlay Lightbox Featherlight */
.featherlight:last-of-type {
    background: rgba(0, 0, 0, 0.8);
}

Die Ecken des Bildes

Die Ecken des Bildes können folgendermaßen angepasst werden:

/* Ecken des Bildes Lightbox Featherlight */

.featherlight-content {
    border-radius: 1vw;
}

.featherlight .featherlight-image {
    border-radius: 1vw;
}

Ein paar Worte zu den abgerundete Ecken (border-radius): Der Border-Radius kann in verschiedenen Browsern unterschiedlich sein. Zum Beispiel wird der Border-Radius in Safari und Firefox oft größer dargestellt als in Chrome, Opera und Edge.

Früher waren Browser-Präfixe wie '-webkit-', '-moz-', '-ms-' und '-o-' üblich, um eine konsistente Darstellung zu gewährleisten. Heutzutage reicht jedoch oft die Standard-Definition wie border-radius: 0.2vw; aus, da moderne Browser diese Präfixe nicht mehr anwenden.

Die Größe der Lightbox

Die Größe der Lightbox für das Bild und die Auflösung werden beibehalten:

/* Größe von Bild in der Lightbox */

.featherlight .featherlight-image {
    max-width: 80vw;
    max-height: 80vh;
    width: auto;
    height: auto;
}

Für iFrames sollte das dann auch so angepasst werden, sonst entsteht ein schwarzer Rand:

/* Größe von Inhalt für iFrame-Lightbox */

.featherlight-iframe .featherlight-content {
    max-width: 80vw;
    max-height: 80vh;
    width: auto;
    height: auto;
}

Am Ende des Beitrags bindet sich ein Beispiel für iFrame in der Lightbox, siehe Eija, …

Rahmen um die Lightbox

Einen Rahmen durch Box-Schatten, ohne das Bildverhältnis zu beeinträchtigen und Ecken abgerundet:

/* Box-Schatten als Rahmen und Ecken abgerundet Lightbox Featherlight */

.featherlight .featherlight-image {
    box-shadow: 0 0 0 30px rgba(255, 255, 255, 1);
    border-radius: 0.2vw;
}
Kreative Schatteneffekte für die Lightbox

Mit dem Suchbegriff 'box-shadow' finden sich Beispiele von »Sehr gut«! Allerdings kann man immer nur einen anwenden.

/* Helle und dunkle Schatten zur Hervorhebung */
.featherlight .featherlight-image {
    box-shadow: 6px 6px 8px rgba(255, 255, 255, 1),
                -6px -6px 8px rgba(0, 0, 0, 0.15);
}

/* Einfache helle und dunkle Schatten */
.featherlight .featherlight-image {
    box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.2),
                -6px -6px 8px rgba(255, 255, 255, 0.8), 
                6px 6px 12px rgba(0, 0, 0, 0.1),
                -6px -6px 12px rgba(255, 255, 255, 0.5);
}

/* Bunte Schatten für dramatischen Effekt */
.featherlight .featherlight-image {
    box-shadow: 4px -4px 15px 0px #ff1f1f, 
                12px -11px 7px 0px #ff9376,
                20px -5px 7px 0px #ffe264, 
                20px 6px 7px 0px #f6ff33,
                13px 12px 17px 0px #ff9527, 
                2px 17px 17px 0px #ff0000,
                -9px 21px 18px 0px #fff212, 
                -9px 6px 11px 0px #ff0808,
                -11px -9px 11px 0px #fffa17, 
                -11px -9px 11px 0px #fffa17,
                -32px -23px 0px -5px rgba(0, 0, 0, 0);
}

/* Gestapelte bunte Schatten für intensiven Effekt */
.featherlight .featherlight-image {
    box-shadow: 8px 0px 0px 0px #dcd0c0, 
                0px 8px 0px 0px #b1938b,
                -8px 0px 0px 0px #4e4e56, 
                0px 0px 0px 8px #da635d,
                -32px -23px 0px -5px rgba(0, 0, 0, 0);
}

/* Extrovertierte, scharfe, gestapelte Schatten */
.featherlight .featherlight-image {
    box-shadow: 10px 0 0 #f0f0f0, 
                20px 0 0 #000, 
                30px 0 0 #f0f0f0,
                0 10px 0 #f0f0f0, 
                10px 10px 0 #000, 
                20px 10px 0 #f0f0f0,
                30px 10px 0 #000, 
                0 20px 0 #000, 
                10px 20px 0 #f0f0f0, 
                20px 20px 0 #000,
                30px 20px 0 #f0f0f0, 
                0 30px 0 #f0f0f0, 
                10px 30px 0 #000,
                20px 30px 0 #f0f0f0, 
                30px 30px 0 #000,
                -32px -23px 0px -5px rgba(0, 0, 0, 0);
}

/* Box-Schatten in verschiedenen Richtungen */
.featherlight .featherlight-image {
    box-shadow: 0px 0px 0px 5px #fff, 
                0px 10px 27px -8px #141414,
                0px -10px 27px -8px #a31925, 
                5px 5px 15px 5px rgba(0, 0, 0, 0);
}

/* Scharfer Schatten mit betonten Ecken */
.featherlight .featherlight-image {
    box-shadow: 0px 20px 0px -10px #ffffff, 
                0px -20px 0px -10px #ffffff,
                20px 0px 0px -10px #ffffff, 
                -20px 0px 0px -10px #ffffff,
                0px 0px 0px 10px #ff0000, 
                5px 5px 15px 5px rgba(0, 0, 0, 0);
}

/* Weiche gestapelte Schatten */
.featherlight .featherlight-image {
    box-shadow: 0 45px 65px rgba(0, 0, 0, 0.5), 
                0 35px 22px rgba(0, 0, 0, 0.16);
}

/* Scharfter Schatten hell und dunkel */
.featherlight .featherlight-image {
    box-shadow: 8px 8px #fff, -8px -8px #ccc;
}

Oder sollte man doch mehr als einen Rahmen definieren? Ja, was für Laptops und Desktops geeignet ist, könnte für Displays von mobilen Geräten ungeeignet sein. Zum Beispiel mit Nachtmodus:

/* Rahmen für die Lightbox */
@media only screen and (max-width: 767px) {
    .featherlight .featherlight-image {
        box-shadow: 6px 6px 8px rgba(255, 255, 255, 0.9),
            -6px -6px 8px rgba(0, 0, 0, 0.15);
    }
}

@media only screen and (min-width: 768px) {
    .featherlight .featherlight-image {
        border-radius: 5px;
        box-shadow: 8px 8px #fff, -8px -8px #ccc;
    }
    [nighteyeplgn="active"] .featherlight .featherlight-image {
        border-radius: 5px;
        box-shadow: 8px 8px #999, -8px -8px #666;
    }
}

Zum Nachtmodus ist es hilfreich, sich mit den Grautönen und besondere deren Kurzschreibweise zu befassen, siehe im Beitrag Farbgestaltung in CSS.

Die Bildbeschriftung anpassen

Die Bildbeschriftung anpassen und zentrieren:

/* Bildbeschriftung Lightbox Featherlight */

.featherlight .featherlight-content .caption {
    color: #838485;
    font-size: 1.15em;
    font-weight: 300;
    line-height: 1.5;
    text-align: center;
    top: auto;
    bottom: 10;
    left: 0;
    right: 0;
    transform: none;
}

Die Buttons anpassen

Die Buttons, für das nächste und vorherige Bild in der Größe verändern, die Opazität variieren und zum Beispiel im Goldenen-Schnitt setzten:

/* Buttons für nächstes und vorheriges Bild Lightbox Featherlight */

.featherlight-next,
.featherlight-previous {
    width: 55px;
    opacity: 0.4;
    top: 60%;
}

Das Schließen-Icon und deren Hintergrund anpassen:

/* Schließen-Icon und Hintergrund Lightbox Featherlight */

.featherlight-close-icon.featherlight-close {
    -webkit-background-size: 75%;
    background-size: 60%;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 10%;
    /*display:none;*/
}

Unschärfeeffekt bei Mouseover

Der Unschärfeeffekt beim Mouseover kann Benutzer dazu anregen, Bilder in der Lightbox zu öffnen. Zusätzlich zum Unschärfeeffekt könnte ein separater Cursor erstellt werden, der speziell für die Lightbox angepasst ist.

Die Interaktion mit den Cursors ist sehr gut gelöst. Falls gewünscht, kann für das Mouseover der Bilder auch ein eigener Cursor erstellt werden, der entsprechend in der Lightbox angepasst ist. Der SVG-Cursor in diesem Beispiel hat eine Größe von 30px. Diese Größe sollte direkt im SVG festgelegt werden:

<svg viewBox="0 0 10.532 10.513" width="30px" height="30px" xmlns="http://www.w3.org/2000/svg">

Somit folgendem CSS wird der Unschärfeeffekt und die neuen Cursors visuell:

/* Cursor für Featherlight-Bilder */
[data-featherlight] img {
    cursor: url('../cursor-zoom-30.svg'), auto;
}

/* Cursor für Lightbox */
.featherlight {
	cursor: url('../cursor-zoom-out-30.svg'), auto;
}

/* Unschärfeeffekt bei Mouseover */
[data-featherlight] img {
    transition: filter 0.3s ease;
}

[data-featherlight] img:hover {
    filter: blur(2px);
}

Der Cursor (cursor-zoom-out) für die Lightbox ist hier nur der Vollständigkeit halber aufgeführt und wird nicht verwendet, da ein größerer Cursor in der Lightbox eher disruptiv wirkt.

Psychologie zum Unschärfeeffekt

Der Unschärfeeffekt beim Mouseover kann aus mehreren Gründen dazu führen, dass Benutzer dazu angeregt werden, Bilder in der Lightbox zu öffnen. Hier sind einige mögliche Erklärungen:

Bäume
Bild von jplenio!
  1. Neugierde: Wenn das Bild unscharf wird, weckt dies möglicherweise die Neugierde des Betrachters, um zu sehen, wie das Bild in seiner scharfen und detaillierten Form aussieht. Dies könnte dazu führen, dass sie das Bild öffnen, um es genauer anzusehen.
  2. Interaktion: Der Unschärfeeffekt kann als eine Art Interaktion wahrgenommen werden. Wenn Benutzer mit dem Mauszeiger über das Bild fahren und es unscharf wird, fühlen sie sich aktiv involviert und möchten möglicherweise mehr erkunden, indem sie das Bild öffnen.
  3. Visuelle Hervorhebung: Der Unschärfeeffekt kann das Bild visuell hervorheben und es von anderen Inhalten auf der Seite abheben. Dadurch wird das Bild auffälliger, was die Wahrscheinlichkeit erhöhen kann, dass Benutzer es öffnen.

Insgesamt kann der Unschärfeeffekt eine subtile, aber wirkungsvolle Möglichkeit sein, Benutzer dazu zu ermutigen, Bilder in der Lightbox zu öffnen, indem er ihre Neugierde weckt, eine Interaktion bietet und das Bild visuell hervorhebt.

Und neugierig, was der Autor von WP Featherlight so macht?

Besuche die Zielseite für weitere Informationen
Erfahren Sie mehr über die Projekte des Autors von WP Featherlight.

Lightbox und Dunkelmodus

Die Bilder in der Lightbox werden von Dunkelmodus mit einem Filter versehen, der mit kleinem CSS richtiggestellt werden kann. Das !important kann verbindlich sein, außer es wird im Customizer abgeseichert.

/* Standard Lightbox Styling - Verhindert Dunkelmodus-Effekte */
[nighteyeplgn="active"] .featherlight-content img {
    filter: none !important;
}

🧡 WP Featherlight mit Abspiel-Buttons

Eine automatische Diashow erlaubt es, die Bilder oder Inhalte automatisch durchlaufen zu lassen. Das lässt sich mit JavaScript und einer gewissen Menge an CSS einrichten.

Wir bieten die 'Diashow mit Abspiel-Buttons und Zeitvorwahl' an, bei der Benutzer die Abspielzeit selbst einstellen können. Zudem ist ein Bildzähler integriert. Die Buttons können auch wieder ausblenden, wenn vom Benutzer keine Interaktion erfolgt. Dazu ist folgend eine Erweiterung hinzuzufügen.

Im Ersten ist das "JavaScript: allgemeine Funktion" und im Zweiten bieten wir drei Möglichkeiten unterschiedlicher Buttons an:

  1. CSS: Abspiel-Buttons mit Dashicons (WordPress Developer Resources).
  2. CSS: Buttons mit SVG-Grafik (selfhtml: SVG/Tutorials/Icons)
  3. CSS + JS für das Derivat mit Unicode-Zeichen (compart).

Das Beispiel auf dieser Website verwendet Unicode-Zeichen.

Zur Verwendung von CSS in der Lightbox

Die Erweiterungen sind responsive und werden mit derselben CSS-Version für die Lightbox angezeigt. Die Anpassungen der Abspiel-Buttons, sei es durch Dashicons, SVG-Grafiken oder Unicode-Zeichen, ändern die Lightbox nicht und unterscheiden sich nur in der Machart der Buttons.

Die Anpassungen für Featherlight selbst wie der Lightbox können auch leicht entfernt werden, wenn der klassische Featherlight-Stil bevorzugt wird. Das top der Buttons für das vorherige und nächstes Bild sollten beibehalten werden, da dies auch den Platz für die Abspielbuttons freimacht. Bei Mobiles ist die Beschriftung der Bilder oberhalb, weil darunter die Buttons platziert sind.

Eine Bedingung für alle Optionen

Das CSS sollte im Customizer gespeichert werden, da bestimmte Prioritäten dies erfordern. Im normalen style.css des Child-Themes werden einige Einstellungen möglicherweise nicht ordnungsgemäß überschrieben, was zu Komplikationen mit dem WP Featherlight-Plug-in führen kann, insbesondere zur Responsivität.

Eine alternative Möglichkeit besteht darin, im Child-Theme eine separate CSS-Datei mit einer höheren Priorität zu erstellen. Zum Beispiel könnte man im Child-Theme eine custom-style.css erstellen und folgenden Code in die functions.php einfügen:

/* CSS mit höherer Priorität */

function enqueue_child_theme_styles() {
    // Registriere und lade die CSS-Datei im Child Theme
    wp_enqueue_style( 'child-theme-custom-styles', get_stylesheet_directory_uri() . '/custom-style.css', array(), null, 'all' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', 999 ); // Höhere Priorität als das Plugin

Dies, sowie die Verwendung des Customizers oder eines Plug-ins wie Simple CSS, ist geeignet, um das CSS erfolgreich zu integrieren.

Da das Plug-in selten Updates benötigt, könnte man das CSS auch minimieren und direkt im Plug-in-Datei-Editor in die csswp-featherlight.min.css eintragen, also Unterhalb des bestehenden Codes. Es ist jedoch ratsam, die Datei für eventuelle Plug-in-Updates in Reserve zu halten.

Die Bedingung für die Option mit Dashicons

Die verwendeten Dashicons  (dashicons dashicons-controls-play, -arrow-up, -arrow-down und -pause) sind zwar für Administratoren im Frontend sichtbar, jedoch könnte es für Besucher der Website nicht sichtbar sein. Mit folgendem Code in der functions.php, ist es auch für Besucher sichtbar zu machen:

/* --- Dashicons für das Frontend --- */

function include_dashicons_font(){
    //Lade Dashicons font
    wp_enqueue_style('dashicons');
}
add_action( 'wp_enqueue_scripts', 'include_dashicons_font', 100 );

Weitere Details dazu im Beitrag Icon-Fonts! – Dashicons von WP vs. Genericons usw.

Eine Diashow mit Abspielen und Zeitvorwahl

  • Der Benutzer kann die Zeitdauer des Ablaufs selbst einstellen, und zur besseren Übersichtlichkeit der Bildanzahl ist ein Bildzähler integriert.

Beim Öffnen der Lightbox ist die grundlegende Einstellung, dass der Benutzer die Weiter- und Zurück-Buttons betätigen kann. Die automatische Diashow kann durch den Start-Button gestartet werden, wobei die Vorgabezeit zwischen den Bildern standardmäßig auf sechs Sekunden eingestellt ist.

Durch die Buttons zur Inkrementierung und Dekrementierung ist die Zeitdauer zwischen 1 und 30 Sekunden eingestellt, wobei der Start-Button erneut betätigt werden muss, um die Änderung zu übernehmen. Jede Änderung der Zeitdauer führt dazu, dass die Diashow gestoppt wird und die Bilder nicht übersprungen werden. Dadurch wird ein entspanntes Benutzererlebnis gewährleistet.

Die Show kann durch den Stopp-Button jederzeit angehalten und mit dem Start-Button wieder fortgesetzt werden. Diese Funktionsweise ermöglicht es dem Benutzer, die Diashow ganz nach seinen Wünschen und Bedürfnissen anzupassen und dabei die Kontrolle über den Ablauf zu behalten. Nach dem Schließen der Lightbox und erneutem Öffnen ist die letzte Zeit eingestellt.

Die Diashow stoppt automatisch, wenn die Seite nicht sichtbar ist (z.B. wenn der Bildschirm ausgeschaltet wird, der Laptop zugeklappt wird oder man den Browser-Tab wechselt). Die Diashow bleibt gestoppt, bis sie manuell wieder gestartet wird. Dies gewährleistet, dass der Ablauf der Diashow nicht gestört oder irritiert ist, wenn man zur Seite zurückkehrt.

Erlebe leichte Eleganz: Mit Featherlight-Varianten tanzen die Bilder im Takt – ein Dank an die Brillanz von WP Featherlight!

Wir bieten nun drei unterschiedliche Versionen der Buttons zur Auswahl an, die an jeden Anspruch oder jede Vorliebe angepasst werden können. Im Grunde sind sie alle ähnlich, responsiv und jeweils betriebsbereit zum Kopieren und Einfügen.

Für die Option bieten wir folgende Auswahlmöglichkeiten:

  1. Dashicons-Buttons: Diese Option bietet die Verwendung von Dashicons, einem Satz von Symbolen und Icons, die nahtlos in WordPress integriert sind. Sie sind eine praktische Wahl für diejenigen, die sich auf die Standard-Icons von WordPress verlassen möchten.
  2. SVG-Grafik als Hintergrundbild: Diese Option ermöglicht es Ihnen, eine benutzerdefinierte SVG-Grafik als Hintergrundbild für die Buttons zu verwenden, ähnlich wie es WP-Featherlight für seine Buttons verwendet. Durch die direkte Einbettung der SVG-Grafik im CSS als Data-URL haben Sie volle Kontrolle über das Aussehen und Verhalten der Buttons.
  3. Unicode-Zeichen: Diese Option bietet eine alternative Möglichkeit, die Buttons über Unicode-Zeichen zu visualisieren. Unicode-Zeichen sind eine plattformübergreifende Möglichkeit, Symbole und Icons darzustellen, und bieten eine breite Palette an visuellen Möglichkeiten.

JavaScript: allgemeine Funktion

Dies ist im Child-Theme in die JS-Datei einzufügen oder, nach einer möglichen Komprimierung (z.B. mit Toptal), direkt in die Datei WP Featherlight js > wpFeatherlight.pkgd.min.js des Plug-ins unterhalb des bestehenden Codes hinzuzufügen. Bedenke, dass nach eventuellen Plug-in-Updates diese Änderungen erneuert werden müssen.

/* --- WP Featherlight Diashow: Abspiel-Buttons mit Zeitvorwahl und Bildzähler --- */

jQuery(document).ready(function($) {
    // Zeitintervall für das automatische Weiterklicken (in Millisekunden)
    var interval = 6000;
    var intervalId; // Variable zur Speicherung der Interval-ID für das Starten und Stoppen der Diashow

    // Funktion zum Klicken des Weiter-Buttons
    function clickNext() {
        // Weiter-Button finden und klicken
        var nextButton = $('.featherlight-next');
        if (nextButton.length > 0) {
            console.log("Next button found:", nextButton);
            nextButton.trigger('click');
        } else {
            console.log("Next button not found");
        }
    }

    // Funktion zum Starten der Diashow
    function startSlideshow() {
        // Zuerst das nächste Bild anzeigen
        clickNext();
        
        // Dann die Diashow in Intervallen fortsetzen
        intervalId = setInterval(clickNext, interval);
    }

    // Funktion zum Stoppen der Diashow
    function stopSlideshow() {
        clearInterval(intervalId);
        intervalId = null; // Setze Interval-ID auf null, um anzuzeigen, dass die Diashow gestoppt ist
    }

    // Funktion zum Inkrementieren der Abspielzeit
    function incrementTime() {
        stopSlideshow(); // Stoppen Sie die Diashow, bevor die Abspielzeit geändert wird
        if (interval < 30000) { // Wenn die Zeitdauer kleiner als 30 Sekunden ist
            interval += 1000; // Inkrement um 1 Sekunde
        }
        updateTimeDisplay();
        console.log("Slide duration increased to:", interval);
    }

    // Funktion zum Dekrementieren der Abspielzeit
    function decrementTime() {
        stopSlideshow(); // Stoppen Sie die Diashow, bevor die Abspielzeit geändert wird
        if (interval > 1000) { // Wenn die Zeitdauer größer als 1 Sekunde ist
            interval -= 1000; // Dekrement um 1 Sekunde
        }
        updateTimeDisplay();
        console.log("Slide duration decreased to:", interval);
    }

    // Funktion zum Hinzufügen der Start- und Stop-Schaltflächen und des Incrementer/Decrementer in die Lightbox
    function addSlideshowButtons() {
        // Überprüfen, ob die Buttons bereits hinzugefügt wurden
        if ($('#slideshow-buttons').length === 0) {
            // Schaltflächen und Incrementer/Decrementer für die Diashow erstellen
            var slideshowControls = $('<div id="slideshow-buttons">' +
                                        '<button id="start-slideshow-button" title="Start Slideshow">Start</button>' +
                                        '<button id="increment-time-button" title="Diashow-Zeit">+</button>' +
                                        '<span id="current-time-display">6</span>' +
                                        '<button id="decrement-time-button" title="Diashow-Zeit">-</button>' +
                                        '<button id="stop-slideshow-button" title="Stop Slideshow">Stop</button>' +
                                        '<div class="featherlight-counter"></div>' +
                                    '</div>');

            // Die Lightbox finden und die Schaltflächen hinzufügen
            $('.featherlight').append(slideshowControls);

            // Event-Listener für den Start-Button
            slideshowControls.find('#start-slideshow-button').on('click', function() {
                if(interval > 0) { // Überprüfen, ob die Zeit größer als 0 ist
                    startSlideshow();
                }
            });

            // Event-Listener für den Stop-Button
            slideshowControls.find('#stop-slideshow-button').on('click', function() {
                stopSlideshow();
            });

            // Event-Listener für den Incrementer
            slideshowControls.find('#increment-time-button').on('click', function() {
                incrementTime();
            });

            // Event-Listener für den Decrementer
            slideshowControls.find('#decrement-time-button').on('click', function() {
                decrementTime();
            });
        }
    }

    // Funktion zum Aktualisieren der Anzeige der aktuellen Abspielzeit
    function updateTimeDisplay() {
        var seconds = interval / 1000;
        var formattedSeconds = seconds < 10 ? '0' + seconds : seconds; // Bei Einstellig wird eine führende Null hinzugefügt
        $('#current-time-display').html(formattedSeconds + '<span class="seconds-label">s</span>'); // 'sec' hinzufügen
    }

    // Funktion zum Überprüfen, ob das Element Teil einer Galerie ist
    function isGallery(element) {
        return $(element).closest('.gallery').length > 0;
    }

    // Funktion zum Aktualisieren des Bildzählers
    function updateImageCounter(gallery, currentIndex) {
        var $images = gallery.find('[data-featherlight]');
        var totalImages = $images.length;
        var currentImageIndex = currentIndex + 1; // Bildindex startet bei 1
        $('.featherlight-counter').text(currentImageIndex + '/' + totalImages);
    }

    // Event-Listener für das Öffnen der Lightbox
    $(document).on('click', '[data-featherlight]', function() {
        // Prüfen, ob das angeklickte Element Teil einer Galerie ist
        if (isGallery(this)) {
            // Die Galerie, zu der das Bild gehört, finden
            var gallery = $(this).closest('.gallery');
            
            // Fügen Sie die Buttons in die Lightbox ein, wenn sie zu einer Galerie gehören
            addSlideshowButtons();
            updateTimeDisplay(); // Anfangsanzeige aktualisieren
            
            // Initialen Bildzähler setzen
            var initialIndex = gallery.find('[data-featherlight]').index(this);
            updateImageCounter(gallery, initialIndex);

            // Event-Listener für Bildwechsel innerhalb der Galerie
            $(document).on('featherlight:afterContent', function(event) {
                var currentImage = $.featherlight.current().$currentTarget;
                var currentIndex = gallery.find('[data-featherlight]').index(currentImage);
                updateImageCounter(gallery, currentIndex);
            });
        }
    });

    // Event-Listener für das Schließen der Lightbox
    $(document).on('click', '.featherlight-close', function() {
        // Stoppen Sie die Diashow, wenn die Lightbox geschlossen wird
        stopSlideshow();
    });

    // Zusätzliche Event-Listener für Weiter- und Zurück-Button in der Galerie
    $(document).on('click', '.featherlight-next, .featherlight-previous', function() {
        var gallery = $.featherlight.current().$currentTarget.closest('.gallery');
        var currentImage = $.featherlight.current().$currentTarget;
        var currentIndex = $(gallery).find('[data-featherlight]').index(currentImage);
        updateImageCounter($(gallery), currentIndex);
    });
	
	// Page Visibility API nutzen, um die Diashow zu pausieren, wenn die Seite nicht sichtbar ist
    document.addEventListener("visibilitychange", function() {
        if (document.hidden) {
            // Pause die Diashow
            stopSlideshow();
        }
    });
});

/* Ende WP Featherlight Diashow: Abspiel-Buttons mit Zeitvorwahl und Bildzähler */

CSS: Buttons mit Dashicons (1)

Unser Vorschlag beinhaltet das folgende CSS, das sowohl Lightbox-Stile als auch Abspiel-Buttons mit Dashicons und ihre Stile umfasst.

Dies ist wie oben unter den Bedingungen für das CSS angeführt. Nach einer möglichen Komprimierung (z.B. mit Toptal) kann es auch direkt in die Datei des Plug-ins editiert werden: Plug-in-Datei-Editor WP Featherlight css > wp-featherlight.min.css. Wie immer ist nach möglichen Plug-in-Updates darauf zu achten, dies zu erneuern.

/* === WP Featherlight Diashow: Abspiel-Buttons mit Zeitvorwahl und Bildzähler samt Stilen  === */

/* --- Lightbox-Stile --- */

/* Hintergrund der Lightbox */
.featherlight:last-of-type {
    background: rgba(0, 0, 0, 0.9);
}

/* Nachtmodus falls forhanden, je nachdem anzupassen */
[nighteyeplgn="active"] .featherlight:last-of-type {
    background: rgba(0, 0, 0, 1);
}

/* Größe von Bild in der Lightbox */
.featherlight .featherlight-image {
    max-width: 80vw;
    max-height: 80vh;
    width: auto;
    height: auto;
}

/* Größe von Inhalt für iFrame-Lightbox */
.featherlight-iframe .featherlight-content {
    max-width: 80vw;
    max-height: 80vh;
    width: auto;
    height: auto;
}

/* Box-Schatten und abgerundete Ecken der Lightbox */
.featherlight .featherlight-image {
    box-shadow: 0 0 0 25px rgba(230, 230, 230, 1);
    border-radius: 0.2vw;
}

@media only screen and (max-width: 424px) {
    .featherlight .featherlight-image {
        box-shadow: 0 0 0 6px rgba(230, 230, 230, 1);
        border-radius: 0.2vw;
    }
}

@media only screen and (min-width: 425px) and (max-width: 768px) {
    .featherlight .featherlight-image {
        box-shadow: 0 0 0 10px rgba(230, 230, 230, 1);
        border-radius: 0.3vw;
    }
}

/* Lightbox Abgerundete Ecken. Sofern der Box-Schatten nicht angewendet wird,
 * kann man das anwenden. Das bezieht sich auch auf die Größe des Bildes in der Lightbox. 
.featherlight-content {
    border-radius: 1vw;
}

.featherlight .featherlight-image {
    border-radius: 1vw;
}*/

/* Beschriftung in der Lightbox, das bezieht sich direkt auf den Box-Schatten */
.featherlight .featherlight-content .caption {
    color: rgba(0, 0, 0, 0.4);
    font-size: 1.15em;
    font-weight: 400;
    line-height: 1.3;
    text-align: center;
    left: 0;
    right: 0;
}

/* Bildbeschriftung auf Mobilgeräte und Tablets befindet sich oberhalb */

@media only screen and (max-width: 320px) {
    .featherlight .featherlight-content .caption {
        top: -75%;
        color: rgba(255, 255, 255, 0.5);
    }
}

@media only screen and (min-width: 321px) and (max-width: 375px) {
    .featherlight .featherlight-content .caption {
        top: -60%;
        color: rgba(255, 255, 255, 0.5);
    }
}

@media only screen and (min-width: 376px) and (max-width: 425px) {
    .featherlight .featherlight-content .caption {
        top: -50%;
        color: rgba(255, 255, 255, 0.5);
    }
}

@media only screen and (min-width: 426px) and (max-width: 768px) {
    .featherlight .featherlight-content .caption {
        top: -20%;
        color: rgba(255, 255, 255, 0.5);
    }
}

/* Beschriftung in der Lightbox, die sich auf ohne Box-Schatten bezieht
.featherlight .featherlight-content .caption {
    color: rgba(255,255,255, 0.8);
    font-size: 1.15em;
    font-weight: 400;
    line-height: 1.3;
    text-align: center;
    left: 0;
    right: 0;
}*/

/* Button für das nächste/vorherige Bild */
.featherlight-next,
.featherlight-previous {
    top: 60%;
    opacity: 0.5;
}

@media screen and (max-width: 425px) {
    .featherlight-next,
    .featherlight-previous {
        top: 77%;
    }
}

@media only screen and (min-width: 426px) and (max-width: 768px) {
    .featherlight-next,
    .featherlight-previous {
        top: 90%;
    }
}

.featherlight-next:hover,
.featherlight-previous:hover {
    transition: 0.3s;
    opacity: 0.8;
}

/* Schließen-Button */
.featherlight-close-icon.featherlight-close {
    opacity: 0.5;
}

.featherlight-close-icon.featherlight-close:hover {
    transition: 0.3s;
    opacity: 0.8;
}

/* - Ende Lightbox-Stile - */

/* --- Diashow: Dashicon Abspiel-Button mit Zeitvorwahl und Bildzähler --- */

/* Allgemeine Stile für Tablets und Mobilgeräte */
@media screen and (max-width: 768px) {
    #slideshow-buttons {
        position: fixed;
        display: flex;
        flex-direction: row;
        top: 90%;
        left: 50%;
        transform: translate(-50%, -50%);
        align-items: center;
        cursor: default;
    }
    /* Allgemeine Button-Stile */
    #slideshow-buttons button {
        padding: 5px 0;
        background-color: rgba(255, 255, 255, 0);
        color: rgba(255, 255, 255, 0.5);
        cursor: pointer;
        margin: 0 5px;
    }
    /* Abspielzeit-Anzeige für Tablets und Mobilgeräte */
    #current-time-display {
        color: rgba(255, 255, 255, 0.5);
        font-size: 16px;
    }
    /* Bildzähler für Mobilgeräte (info: das ist inne von @media (max-width: 768px)) */
    @media screen and (max-width: 590px) {
        .featherlight-counter {
            position: absolute;
            display: flex;
            flex-direction: row;
            top: -140%;
            left: 45%;
            color: rgba(255, 255, 255, 0.5);
            font-size: 16px;
        }
    }
/* (info: das ist inne von @media (max-width: 768px)) */
    @media only screen and (min-width: 591px) and (max-width: 768px) {
        .featherlight-counter {
            position: relative;
            display: flex;
            flex-direction: row;
            left: 2%;
            color: rgba(255, 255, 255, 0.5);
            font-size: 16px;
        }
    }
}

/* Allgemeine Stile für Laptops und Desktops */
@media screen and (min-width: 769px) {
    #slideshow-buttons {
        position: absolute;
        top: 15%;
        right: 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: default;
    }
    /* Allgemeine Button-Stile */
    #slideshow-buttons button {
        padding: 5px 7px;
        background-color: rgba(255, 255, 255, 0);
        color: rgba(255, 255, 255, 0.5);
        cursor: pointer;
    }
    /* Bildzähler für Laptops und Desktops */
    .featherlight-counter {
        position: absolute;
        top: 115%;
        right: 10px;
        color: rgba(255, 255, 255, 0.5);
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 16px;
    }
}

/* Spezielle Button-Stile */
#start-slideshow-button::after,
#increment-time-button::after,
#decrement-time-button::after,
#stop-slideshow-button::after {
    font-family: "dashicons";
    font-size: 36px;
    color: rgba(255, 255, 255, 0.5);
    vertical-align: middle;
}

#start-slideshow-button::after {
    content: "\f522";
}

#increment-time-button::after {
    content: "\f142";
    padding-right: 1.5px;
}

#decrement-time-button::after {
    content: "\f140";
}

#stop-slideshow-button::after {
    content: "\f523";
}

@media screen and (max-width: 768px) {
    #decrement-time-button::after {
        padding-left: 5px;
    }
}

/* Abspielzeit-Anzeige */
#current-time-display {
    position: relative;
    margin: -10px 0;
    padding: 0 6px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.5);
    border: 3px inset rgba(255, 255, 255, 0.5);
    z-index: 20;
}

/* Sekunden-Label */
.seconds-label {
    font-size: 16px;
    padding-left: 3px;
}

/* z-index für Inkrement- und Dekrement-Buttons */
#increment-time-button,
#decrement-time-button {
    z-index: 10;
}

/* Buttons Hover-Stile */
#start-slideshow-button:hover::after,
#increment-time-button:hover::after,
#decrement-time-button:hover::after,
#stop-slideshow-button:hover::after {
    transition: 0.3s;
    color: #ffffff;
    opacity: 0.8;
}

/* - Ende Diashow: Dashicon Abspiel-Buttons mit Zeitvorwahl und Bildzähler - */

/* = Ende WP Featherlight Diashow: Abspiel-Buttons mit Zeitvorwahl und Bildzähler samt Stilen = */

In dieser Variation wurden die Dashicons im CSS festgelegt, da sich diese problemlos an die Größe anpassen lassen.

CSS: Buttons mit SVG-Grafik (2)

Wer die Buttons lieber mit SVG von Base64 einpflegen möchte, sollte den entsprechenden Teil ersetzen. Hiermit entfällt auch die Bedingung zu den Dashicons.

Der Abschnitt: "Diashow: Dashicon Abspiel-Button …" kann durch das folgende CSS "Diashow: SVG-Grafik Abspiel-Button …" getauscht werden:

/* --- Diashow: SVG-Grafik Abspiel-Button mit Zeitvorwahl und Bildzähler --- */

/* Allgemeine Stile für Tablets und Mobilgeräte */
@media screen and (max-width: 768px) {
    #slideshow-buttons {
        position: fixed;
        display: flex;
        flex-direction: row;
        left: 50%;
        top: 90%;
        transform: translate(-50%, -50%);
        align-items: center;
        cursor: default;
    }
}

/* Allgemeine Stile für Laptops und Desktops */
@media screen and (min-width: 769px) {
    #slideshow-buttons {
        position: absolute;
        top: 17%;
        right: 1%;
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: default;
    }
}

/* Allgemeine Button-Stile */
#slideshow-buttons button {  
    background-color: rgba(255, 255, 255, 0);
    cursor: pointer;
    opacity: 0.5;
    margin: 5px;
    border: none;
    padding: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
	color: transparent;
}

/* Start-Button */
#start-slideshow-button {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E");
    width: 40px;
    height: 40px;
}

/* Inkrement-Button */
#increment-time-button {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7 14l5-5 5 5H7z'/%3E%3C/svg%3E");
    width: 45px;
    height: 45px;
}

/* Dekrement-Button */
#decrement-time-button {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E");
    width: 45px;
    height: 45px;
}

/* Stop-Button */
#stop-slideshow-button {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M6 5h4v14H6V5zm8 0h4v14h-4V5z'/%3E%3C/svg%3E");
    width: 40px;
    height: 40px;
}

/* Buttons Hover-Stile */
#start-slideshow-button:hover,
#increment-time-button:hover,
#decrement-time-button:hover,
#stop-slideshow-button:hover { 
    opacity: 0.8;
}

/* Abspielzeit-Anzeige für Tablets und Mobilgeräte */
@media screen and (max-width: 768px) {
    #current-time-display {
        color: rgba(255, 255, 255, 0.5);
        font-size: 18px;
    }
}

/* Abspielzeit-Anzeige für Laptops und Desktops */
@media screen and (min-width: 769px) {
    #current-time-display {
        color: rgba(255, 255, 255, 0.5);
        position: relative;   
        padding: 0px 6px;
        font-size: 16px;
        border: 3px inset rgba(255, 255, 255, 0.5);
        z-index: 20;
        margin: -15px;
    }
}

/* Sekunde 's' */
.seconds-label {
    font-size: 16px;
    padding-left: 3px;
}

/* Bildzähler für Mobilgeräte */
@media screen and (max-width: 590px) {
    .featherlight-counter {
        position: absolute;
        display: flex;
        flex-direction: row;
        top: -140%;
        left: 45%;
        color: rgba(255, 255, 255, 0.5);
        font-size: 16px;
    }
}

@media only screen and (min-width: 591px) and (max-width: 768px) {
    .featherlight-counter {
        position: relative;
        display: flex;
        flex-direction: row;
        left: 2%;
        color: rgba(255, 255, 255, 0.5);
        font-size: 16px;
    }
}

/* Bildzähler für Laptops und Desktops */
@media screen and (min-width: 769px) {  
    .featherlight-counter {
        position: absolute;
        top: 115%;
        right: 10px;
        color: rgba(255, 255, 255, 0.5);
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 16px;
    }
}

/* - Ende Diashow: SVG-Grafik Abspiel-Button mit Zeitvorwahl und Bildzähler - */

In dieser Variation wurden die Buttons als SVG-Grafik erstellt und können der Größe leicht angepasst werden.

Intuitive Bedienung für nahtloses Diashow-Vergnügen.

CSS: Buttons mit Unicode-Zeichen im JS (3)

Eine weitere Variation erfolgt bei den Buttons mit Unicode-Zeichen, wodurch auch die Bedingung zu den Dashicons entfällt.

Auch hier ist das CSS unterschiedlich und der Austausch erfolgt gleich wie oberhalb, also der Abschnitt "Diashow: Dashicon Abspiel-Button …" kann durch das folgende CSS getauscht werden:

/* --- Diashow: Unicode-Zeichen im JS; Abspiel-Buttons mit Zeitvorwahl und Bildzähler --- */

/* Allgemeine Stile für Tablets und Mobilgeräte */
@media screen and (max-width: 768px) {
    #slideshow-buttons {
        position: fixed;
        display: flex;
        flex-direction: row;
        left: 50%;
        top: 90%;
        transform: translate(-50%, -50%);
        align-items: center;
        cursor: default;
    }
    /* Allgemeine Button-Stile */
    #slideshow-buttons button {
        padding: 0;
        background-color: transparent;
        color: rgba(255, 255, 255, 0.5);
        cursor: pointer;
        margin: 0 18px;
        font-size: 36px; /* Einheitliche Schriftgröße für Mobilgeräte */
    }
}

/* Allgemeine Stile für Laptops und Desktops */
@media screen and (min-width: 769px) {
    #slideshow-buttons {
        position: absolute;
        top: 17%;
        right: 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: default;
    }
    /* Allgemeine Button-Stile */
    #slideshow-buttons button {
        padding: 5px 7px;
        background-color: transparent;
        color: rgba(255, 255, 255, 0.5);
        cursor: pointer;
        margin: 10px 0;
        font-size: 36px; /* Einheitliche Schriftgröße für Desktops */
    }
}

/* Start-Button */
#start-slideshow-button {
    vertical-align: middle;
}

/* Inkrement-Button */
#increment-time-button {
    transform: rotate(180deg);
    vertical-align: middle;
}

/* Abspielzeit-Anzeige für alle Geräte */
#current-time-display {
    color: rgba(255, 255, 255, 0.5);
    position: relative;
    padding: 0 6px;
    font-size: 18px;
    border: 3px inset rgba(255, 255, 255, 0.5);
    z-index: 20;
}

@media screen and (min-width: 769px) {
    #current-time-display {
        margin: -25px 0;
    }
}

@media screen and (max-width: 768px) {
    #current-time-display {
        margin: 0;
    }
}

/* Sekunde 's' */
.seconds-label {
    font-size: 16px;
    padding-left: 3px;
}

/* Inkrement- und Dekrement-Buttons z-index */
#increment-time-button,
#decrement-time-button {
    z-index: 10;
}

/* Dekrement-Button */
#decrement-time-button {
}

/* Stop-Button */
#stop-slideshow-button {
    transform: rotate(90deg);
    margin-left: 10px;
}

/* Buttons Hover-Stile */
#start-slideshow-button:hover,
#increment-time-button:hover,
#decrement-time-button:hover,
#stop-slideshow-button:hover {
    transition: 0.3s;
    color: #ffffff;
    opacity: 0.8;
}

/* Bildzähler für Mobilgeräte */
@media screen and (max-width: 590px) {
    .featherlight-counter {
        position: absolute;
        display: flex;
        flex-direction: row;
        top: -200%;
        left: 45%;
        color: rgba(255, 255, 255, 0.5);
        font-size: 18px;
        font-weight: bold;
    }
}

@media only screen and (min-width: 591px) and (max-width: 768px) {
    .featherlight-counter {
        position: relative;
        display: flex;
        flex-direction: row;
        left: 2%;
        color: rgba(255, 255, 255, 0.5);
        font-size: 18px;
        font-weight: bold;
    }
}

/* Bildzähler für Laptops und Desktops */
@media screen and (min-width: 769px) {
    .featherlight-counter {
        position: absolute;
        top: 155%;
        color: rgba(255, 255, 255, 0.5);
        padding: 5px 10px;
        font-size: 18px;
        font-weight: bold;
    }
}

/* - Ende Diashow: Unicode-Zeichen im JS; Abspiel-Buttons mit Zeitvorwahl und Bildzähler - */

 Die Unicode-Zeichen sind hier nicht Bestandteil des CSS und sind folgend im Script dabei.

Boot, Regen
Bereit für Anpassungen? Sei auf unterschiedliche Aspekte vorbereitet!
Unicode-Zeichen im JS

Das folgende JavaScript ist vollständig und kann so wie es ist anstatt des Codes von Eingangs verwendet werden.

/* --- 1A WP Featherlight Diashow: Abspiel-Buttons mit Zeitvorwahl und Bildzähler --- */

jQuery(document).ready(function($) {
    // Zeitintervall für das automatische Weiterklicken (in Millisekunden)
    var interval = 6000;
    var intervalId; // Variable zur Speicherung der Interval-ID für das Starten und Stoppen der Diashow

    // Funktion zum Klicken des Weiter-Buttons
    function clickNext() {
        // Weiter-Button finden und klicken
        var nextButton = $('.featherlight-next');
        if (nextButton.length > 0) {
            nextButton.trigger('click');
        }
    }

    // Funktion zum Starten der Diashow
    function startSlideshow() {
        // Zuerst das nächste Bild anzeigen
        clickNext();
        
        // Dann die Diashow in Intervallen fortsetzen
        intervalId = setInterval(clickNext, interval);
    }

    // Funktion zum Stoppen der Diashow
    function stopSlideshow() {
        clearInterval(intervalId);
        intervalId = null; // Setze Interval-ID auf null, um anzuzeigen, dass die Diashow gestoppt ist
    }

    // Funktion zum Inkrementieren der Abspielzeit
    function incrementTime() {
        stopSlideshow(); // Stoppen Sie die Diashow, bevor die Abspielzeit geändert wird
        if (interval < 30000) { // Wenn die Zeitdauer kleiner als 30 Sekunden ist
            interval += 1000; // Inkrement um 1 Sekunde
        }
        updateTimeDisplay();
    }

    // Funktion zum Dekrementieren der Abspielzeit
    function decrementTime() {
        stopSlideshow(); // Stoppen Sie die Diashow, bevor die Abspielzeit geändert wird
        if (interval > 1000) { // Wenn die Zeitdauer größer als 1 Sekunde ist
            interval -= 1000; // Dekrement um 1 Sekunde
        }
        updateTimeDisplay();
    }

    // Funktion zum Hinzufügen der Start- und Stop-Schaltflächen und des Incrementer/Decrementer in die Lightbox
    function addSlideshowButtons() {
        // Überprüfen, ob die Buttons bereits hinzugefügt wurden
        if ($('#slideshow-buttons').length === 0) {
            // Schaltflächen und Incrementer/Decrementer für die Diashow erstellen
            var slideshowControls = $('<div id="slideshow-buttons">' +
                                    '<button id="start-slideshow-button" title="Start Slideshow">&#9654;</button>' +
                                    '<button id="increment-time-button" title="Diashow-Zeit">&#9662;</button>' +
                                    '<span id="current-time-display">6</span>' +
                                    '<button id="decrement-time-button" title="Diashow-Zeit">&#9663;</button>' +
                                    '<button id="stop-slideshow-button" title="Stop Slideshow">&#12307;</button>' +
                                    '<div class="featherlight-counter"></div>' +
                                '</div>');

            // Die Lightbox finden und die Schaltflächen hinzufügen
            $('.featherlight').append(slideshowControls);

            // Event-Listener für den Start-Button
            slideshowControls.find('#start-slideshow-button').on('click', function() {
                if(interval > 0) { // Überprüfen, ob die Zeit größer als 0 ist
                    startSlideshow();
                }
            });

            // Event-Listener für den Stop-Button
            slideshowControls.find('#stop-slideshow-button').on('click', function() {
                stopSlideshow();
            });

            // Event-Listener für den Incrementer
            slideshowControls.find('#increment-time-button').on('click', function() {
                incrementTime();
            });

            // Event-Listener für den Decrementer
            slideshowControls.find('#decrement-time-button').on('click', function() {
                decrementTime();
            });
        }
    }

    // Funktion zum Aktualisieren der Anzeige der aktuellen Abspielzeit
    function updateTimeDisplay() {
        var seconds = interval / 1000;
        var formattedSeconds = seconds < 10 ? '0' + seconds : seconds; // Bei Einstellig wird eine führende Null hinzugefügt
        $('#current-time-display').html(formattedSeconds + '<span class="seconds-label">s</span>'); // 's' hinzufügen
    }

    // Funktion zum Überprüfen, ob das Element Teil einer Galerie ist
    function isGallery(element) {
        return $(element).closest('.gallery').length > 0;
    }

    // Funktion zum Aktualisieren des Bildzählers
    function updateImageCounter(gallery, currentIndex) {
        var $images = gallery.find('[data-featherlight]');
        var totalImages = $images.length;
        var currentImageIndex = currentIndex + 1; // Bildindex startet bei 1
        $('.featherlight-counter').text(currentImageIndex + '/' + totalImages);
    }

    // Event-Listener für das Öffnen der Lightbox
    $(document).on('click', '[data-featherlight]', function() {
        // Prüfen, ob das angeklickte Element Teil einer Galerie ist
        if (isGallery(this)) {
            // Die Galerie, zu der das Bild gehört, finden
            var gallery = $(this).closest('.gallery');
            
            // Fügen Sie die Buttons in die Lightbox ein, wenn sie zu einer Galerie gehören
            addSlideshowButtons();
            updateTimeDisplay(); // Anfangsanzeige aktualisieren
            
            // Initialen Bildzähler setzen
            var initialIndex = gallery.find('[data-featherlight]').index(this);
            updateImageCounter(gallery, initialIndex);

            // Event-Listener für Bildwechsel innerhalb der Galerie
            $(document).on('featherlight:afterContent', function(event) {
                var currentImage = $.featherlight.current().$currentTarget;
                var currentIndex = gallery.find('[data-featherlight]').index(currentImage);
                updateImageCounter(gallery, currentIndex);
            });
        }
    });

    // Event-Listener für das Schließen der Lightbox
    $(document).on('click', '.featherlight-close', function() {
        // Stoppen Sie die Diashow, wenn die Lightbox geschlossen wird
        stopSlideshow();
    });

    // Zusätzliche Event-Listener für Weiter- und Zurück-Button in der Galerie
    $(document).on('click', '.featherlight-next, .featherlight-previous', function() {
        var gallery = $.featherlight.current().$currentTarget.closest('.gallery');
        var currentImage = $.featherlight.current().$currentTarget;
        var currentIndex = $(gallery).find('[data-featherlight]').index(currentImage);
        updateImageCounter($(gallery), currentIndex);
    });

    // Page Visibility API nutzen, um die Diashow zu pausieren, wenn die Seite nicht sichtbar ist
    document.addEventListener("visibilitychange", function() {
        if (document.hidden) {
            // Pause die Diashow
            stopSlideshow();
        }
    });
});

/* Ende WP Featherlight Diashow: Abspiel-Buttons mit Zeitvorwahl und Bildzähler */

Wir haben nun drei unterschiedliche Versionen der Buttons zur Auswahl. Sie sind alle responsiv und einsatzbereit zum Kopieren und Einfügen.

Steuerung zur interaktiven Diashow

Die Variation ermöglicht es, dass die Abspiel-Buttons automatisch ausgeblendet werden, wenn keine Benutzerinteraktion erfolgt. Dadurch wird dem Benutzer ein ruhigeres Bild der Diashow geboten.

  1. Diashow-Button-Steuerung für Maus-Intervall und einer Bildschirmbreite ab 1024 Pixel.
  2. Diashow-Button-Steuerung für Maus-Intervall und das Berühren des Displays (für mobile Geräte).

Das Aus-Einblenden der Buttons erfolgt statt .fadeIn(); und .fadeOut(); der Methode mit opacity, weil dadurch der Bildzähler nicht nach oben floatet.

Perfekte Diashow-Kontrolle mit minimalem Aufwand.

Die Steuerung ist mittels var movementThreshold = 50; festgelegt. Somit erfolgt die Einblendung, nachdem die Bewegung der Maus einen bestimmten Schwellenwert überschreitet.

A. Steuerung für Bildschirmbreite ab 1024 Pixel

Für den sanften Übergang ist auch ein CSS dabei und dank opacity: 1 !important; bleiben bei Hover die Abspielbuttons permanent visuell.

/* Diashow-Button-Steuerung für Desktop und Mobil, Bildzähler immer sichtbar zs. JS */

#slideshow-buttons button,
#slideshow-buttons #current-time-display {
    opacity: 0;
    transition: opacity 0.5s ease;
}

#slideshow-buttons:hover button,
#slideshow-buttons:hover #current-time-display {
    opacity: 1 !important;
    transition: opacity 0.5s ease;
}

Die Steuerung der Aus-Einblendung wird nur für Bildschirmbreite ab 1024 Pixel angewendet:

/* Diashow-Button-Steuerung für Bildschirmbreite ab 1024 Pixel, Bildzähler stets sichtbar */

jQuery(document).ready(function($) {
	var buttonVisibilityDuration = 4000; // Dauer, für die die Buttons nach dem Stillstand der Maus sichtbar bleiben (in Millisekunden)
	var hideTimeout;
	var lastMouseX = 0;
	var lastMouseY = 0;
	var movementThreshold = 50; // Schwellenwert in Pixeln

	// Funktion zum Einblenden der Buttons
    function showButtons() {
        $('#slideshow-buttons button, #current-time-display').css('opacity', 1);
        resetHideTimeout();
    }

    // Funktion zum Ausblenden der Buttons
    function hideButtons() {
        $('#slideshow-buttons button, #current-time-display').css('opacity', 0);
    }

	// Timeout zurücksetzen, um die Buttons auszublenden
	function resetHideTimeout() {
		clearTimeout(hideTimeout);
		hideTimeout = setTimeout(function() {
			hideButtons();
		}, buttonVisibilityDuration);
	}

	// Event-Listener für Mausbewegung mit Schwellenwert
	$(document).on('mousemove', function(event) {
		var mouseX = event.pageX;
		var mouseY = event.pageY;

		// Berechne die Bewegung der Maus
		var deltaX = Math.abs(mouseX - lastMouseX);
		var deltaY = Math.abs(mouseY - lastMouseY);

		if (deltaX > movementThreshold || deltaY > movementThreshold) {
			showButtons();
			lastMouseX = mouseX;
			lastMouseY = mouseY;
		}
	});

	// Event-Listener für das Öffnen der Lightbox
	$(document).on('click', '[data-featherlight]', function() {
		showButtons(); // Beim Öffnen der Lightbox die Buttons einblenden
	});

	// Event-Listener für die Maus-Intervall
	$(document).on('mouseleave', '.featherlight-content', function() {
		resetHideTimeout();
	});

	// Initiales Ausblenden der Buttons beim Laden der Seite
	hideButtons();
}
});

/* Ende Diashow-Button-Steuerung für Bildschirmbreite ab 1024 Pixel */

Insgesamt ermöglicht dieser Code eine benutzerfreundliche Steuerung der Diashow-Buttons, indem sie ab Bildschirmbreite von 1024 Pixel automatisch ausgeblendet werden. Dies geschiet wenn der Cursor still steht, und wieder eingeblendet werden, wenn der Mauszeiger bewegt wird.

B. Steuerung für Desktop und mobile Geräte

Dieser JavaScript-Code blendet die Diashow-Buttons automatisch aus, wenn keine Mausbewegung stattfindet, und blendet sie wieder ein, wenn der Benutzer den Cursor bewegt oder das Display auf mobilen Geräten berührt.

  • Das CSS ist dasselbe wie unter A.

Die Aus-Einblendung erfolgt durch das Script:

/* Diashow-Button-Steuerung für Desktop und Mobil, Bildzähler stets sichtbar  */

jQuery(document).ready(function($) {
    var buttonVisibilityDuration = 4000; // Dauer, für die die Buttons nach dem Stillstand der Maus sichtbar bleiben (in Millisekunden)
    var hideTimeout;
    var lastMouseX = 0;
    var lastMouseY = 0;
    var movementThreshold = 50; // Schwellenwert in Pixeln

    // Funktion zum Einblenden der Buttons
    function showButtons() {
        $('#slideshow-buttons button, #current-time-display').css('opacity', 1);
        resetHideTimeout();
    }

    // Funktion zum Ausblenden der Buttons
    function hideButtons() {
        $('#slideshow-buttons button, #current-time-display').css('opacity', 0);
    }

    // Timeout zurücksetzen, um die Buttons auszublenden
    function resetHideTimeout() {
        clearTimeout(hideTimeout);
        hideTimeout = setTimeout(function() {
            hideButtons();
        }, buttonVisibilityDuration);
    }

    // Event-Listener für Mausbewegung mit Schwellenwert
    $(document).on('mousemove', function(event) {
        var mouseX = event.pageX;
        var mouseY = event.pageY;

        // Berechne die Bewegung der Maus
        var deltaX = Math.abs(mouseX - lastMouseX);
        var deltaY = Math.abs(mouseY - lastMouseY);

        if (deltaX > movementThreshold || deltaY > movementThreshold) {
            showButtons();
            lastMouseX = mouseX;
            lastMouseY = mouseY;
        }
    });

    // Event-Listener für das Öffnen der Lightbox
    $(document).on('click', '[data-featherlight]', function() {
        showButtons(); // Beim Öffnen der Lightbox die Buttons einblenden
    });

    // Event-Listener für Maus-Intervall
    $(document).on('mouseleave', '.featherlight-content', function() {
        resetHideTimeout();
    });

    // Event-Listener für das Berühren des Displays (für mobile Geräte)
    $(document).on('touchstart', function() {
        showButtons();
    });

    // Initiales Ausblenden der Buttons beim Laden der Seite
    hideButtons();
});

/* Ende Diashow-Button-Steuerung für Desktop und Mobil, Bildzähler stets sichtbar */

Die zweite Galerie auf der Seite – klar definiert in der Lightbox! – und Slideschow Aus-Einblendung:

Bilder von jplenio!


Die Diashow-Buttons zusammen mit dem Bildzähler könnten auch allein mit CSS ein- und ausgeblendet werden, wenn der Cursor außerhalb der Website bewegt wird.

/* Abbspiel-Buttons und Bilderzähler ausblenden */

#slideshow-buttons {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.featherlight:hover #slideshow-buttons {
    opacity: 1;
}

Anhang

Im ersten Abschnitt befindet sich das CSS unserer Lightbox. Im zweiten Abschnitt befinden sich die Anfänge der Entwicklung dieses Beitrags.

Unsere Lightbox in der hier gezeigten Form

Das ist im Zusammenspiel mit:

  • Script Unicode-Zeichen im JS (3) und
  • Steuerung für Desktop und mobile Geräte (B).

Wir bieten unsere Lightbox in der hier gezeigten Form an. Das Besondere daran ist, dass sie einen hellen statt des üblichen dunklen Hintergrunds hat. Um dies zu ermöglichen, müssen neben den neu erstellten Abspiel-Buttons auch die Buttons von WP Featherlight angepasst werden. Diese Buttons sind SVGs und lassen sich nicht einfach in ihrer Farbe ändern.

Deshalb sollten die drei SVGs von Featerhlight so angepasst werden, dass sie im dunklen Farbton mit Transparenz (Opazität) angezeigt werden, anstatt im hellen. Die ursprünglichen Icons wurden also invertiert. Für den Dunkel-Modus und die Lightbox braucht man Buttons mit dunklen Farben, daher werden diese weiterhin verwendet.

Das folgende CSS ist vollständig und kann so wie es ist anstatt des Codes von Eingangs verwendet werden.

/* === WP Featherlight Diashow: Abspiel-Buttons mit Zeitvorwahl und 
 * Bildzähler, autom. Ausblendung und 
 * Bildzähler stets visuell  === */

/* --- Lightbox-Stile --- */

/* Hintergrund der Lightbox */
.featherlight:last-of-type {
    background: rgba(230, 230, 230, 1);
}

/* Nachtmodus falls forhanden, je nachdem stets anzupassen */
[nighteyeplgn="active"] .featherlight:last-of-type {
    background: #e6e6e6;
}

/* Standard Lightbox Styling - Verhindert Dunkelmodus-Effekte */
[nighteyeplgn="active"] .featherlight-content img {
    filter: none !important;
}

/* Größe des Bildes in der Lightbox und Ecken abgerundet */
.featherlight .featherlight-image {
    max-width: 80vw;
    max-height: 80vh;
    width: auto;
    height: auto;
}

.featherlight-content {
    border-radius: 0.5vw;
}

/* Größe von Inhalt für iFrame-Lightbox */
.featherlight-iframe .featherlight-content {
    max-width: 80vw;
    max-height: 80vh;
    width: auto;
    height: auto;
}

@media only screen and (max-width: 768px) {
    .featherlight-content {
        border-radius: 0.5vw;
    }
    .featherlight .featherlight-image {
        border-radius: 0.5vw;
    }
}

/* Rahmen für die Lightbox */
@media only screen and (max-width: 767px) {
    .featherlight .featherlight-image {
        box-shadow: 6px 6px 8px rgba(255, 255, 255, 1),
            -6px -6px 8px rgba(0, 0, 0, 0.15);
    }
}

@media only screen and (min-width: 768px) {
    .featherlight .featherlight-image {
        border-radius: 5px;

        box-shadow: 8px 8px #fff, -8px -8px #ccc;
    }
    [nighteyeplgn="active"] .featherlight .featherlight-image {
        border-radius: 5px;
        box-shadow: 8px 8px #999, -8px -8px #666;
    }
}

/* Beschriftung in der Lightbox */
.featherlight .featherlight-content .caption {
    color: rgba(0, 0, 0, 0.6);
    font-size: 1.15em;
    font-weight: 300;
    line-height: 1.3;
    text-align: center;
    left: 0;
    right: 0;
}

@media only screen and (max-width: 320px) {
    .featherlight .featherlight-content .caption {
        top: -75%;
    }
}

@media only screen and (min-width: 321px) and (max-width: 375px) {
    .featherlight .featherlight-content .caption {
        top: -60%;
    }
}

@media only screen and (min-width: 376px) and (max-width: 425px) {
    .featherlight .featherlight-content .caption {
        top: -50%;
    }
}

/* Button für das nächste/vorherige Bild und weiter @media Logik  */
.featherlight-next,
.featherlight-previous {
    top: 60%;
}

@media screen and (max-width: 425px) {
    .featherlight-next,
    .featherlight-previous {
        top: 77%;
    }
}
@media only screen and (min-width: 426px) and (max-width: 768px) {
    .featherlight .featherlight-content .caption {
        top: -20%;
    }
    .featherlight-next,
    .featherlight-previous {
        top: 90%;
    }
}

/* Buttons Hover-Stile */
.featherlight-close-icon.featherlight-close:hover,
.featherlight-next:hover,
.featherlight-previous:hover {
    transition: 0.3s;
    opacity: 0.6;
}

[nighteyeplgn="active"] .featherlight-close-icon.featherlight-close:hover,
[nighteyeplgn="active"] .featherlight-next:hover,
[nighteyeplgn="active"] .featherlight-previous:hover {
    transition: 0.3s;
    opacity: 0.8;
}

/* Close Icon Tag – neu */
.featherlight .featherlight-close-icon {
    background-color: transparent;
    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M21%204.41L19.59%203%2012%2010.59%204.41%203%203%204.41%2010.59%2012%203%2019.59%204.41%2021%2012%2013.41%2019.59%2021%2021%2019.59%2013.41%2012%2021%204.41z%22/%3E%3C/svg%3E);
    opacity: 0.4;
}
/* Close Icon Nacht – orig. */
[nighteyeplgn="active"] .featherlight .featherlight-close-icon {
    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%09%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M21%204.41L19.59%203%2012%2010.59%204.41%203%203%204.41%2010.59%2012%203%2019.59%204.41%2021%2012%2013.41%2019.59%2021%2021%2019.59%2013.41%2012%2021%204.41z%22/%3E%0A%3C/svg%3E);
    opacity: 0.5;
}

/* Next Icon Tag – neu */
.featherlight-next {
    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M8.59%2016.59L13.17%2012%208.59%207.41%2010%206l6%206-6%206-1.41-1.41z%22/%3E%3C/svg%3E);
    opacity: 0.4;
}
/* Next Icon Nacht – orig. */
[nighteyeplgn="active"] .featherlight-next {
    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%09%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M8.59%2016.59L13.17%2012%208.59%207.41%2010%206l6%206-6%206-1.41-1.41z%22/%3E%0A%3C/svg%3E);
    opacity: 0.5;
}

/* Prev Icon Tag – neu */
.featherlight-previous {
    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M15.41%207.41L10.83%2012l4.58%204.59L14%2018l-6-6%206-6%201.41%201.41z%22/%3E%3C/svg%3E);
    opacity: 0.4;
}
/* Prev Icon Nacht – orig. */
[nighteyeplgn="active"] .featherlight-previous {
    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%09%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M15.41%207.41L10.83%2012l4.58%204.59L14%2018l-6-6%206-6%201.41%201.41z%22/%3E%0A%3C/svg%3E);
    opacity: 0.5;
}

/* - Ende Lightbox-Stile - */

/* --- Diashow: Unicode-Zeichen im JS; Abspiel-Buttons mit Zeitvorwahl, autom. Ausblendung und Bildzähler stets visuell --- */

/* Allgemeine Stile */
#slideshow-buttons button {
    color: rgba(0, 0, 0, 0.4);
}

[nighteyeplgn="active"] #slideshow-buttons button {
    color: rgba(255, 255, 255, 0.5);
}

#start-slideshow-button {
    vertical-align: middle;
}

#increment-time-button {
    transform: rotate(180deg);
    vertical-align: middle;
}

/* Allgemeine Stile für Tablets und Mobilgeräte */
@media screen and (max-width: 768px) {
    #slideshow-buttons {
        position: fixed;
        display: flex;
        flex-direction: row;
        left: 50%;
        top: 90%;
        transform: translate(-50%, -50%);
        align-items: center;
        cursor: default;
    }
    #slideshow-buttons button {
        padding: 0;
        background-color: transparent;
        color: rgba(255, 255, 255, 0.5);
        cursor: pointer;
        margin: 0 18px;
        font-size: 36px;
    }
    #slideshow-buttons button {
        color: rgba(0, 0, 0, 0.4);
    }
}

/* Abspielzeit-Anzeige für alle Geräte */
#current-time-display {
    position: relative;
    padding: 0 6px;
    border: 3px inset rgba(255, 255, 255, 0.5);
    font-size: 18px;
    color: rgba(0, 0, 0, 0.5);
    font-weight: 400;
    z-index: 20;
}

[nighteyeplgn="active"] #current-time-display {
    color: rgba(255, 255, 255, 0.5);
}

@media screen and (max-width: 768px) {
    #current-time-display {
        margin: 0;
    }
}
/* Allgemeine Stile für Laptops und Desktops */
@media screen and (min-width: 769px) {
    #slideshow-buttons {
        position: absolute;
        top: 17%;
        right: 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: default;
    }
    #slideshow-buttons button {
        padding: 5px 7px;
        background-color: transparent;
        cursor: pointer;
        margin: 10px 0;
        font-size: 36px;
    }
    #current-time-display {
        margin: -25px 0;
    }
}

[nighteyeplgn="active"] #slideshow-buttons button {
    color: rgba(255, 255, 255, 0.5);
}

/* Sekunde 's' */
.seconds-label {
    font-size: 16px;
    padding-left: 3px;
}

/* Inkrement- und Dekrement-Buttons z-index */
#decrement-time-button,
#increment-time-button {
    z-index: 10;
}

/* Stop-Button */
#stop-slideshow-button {
    transform: rotate(90deg);
    margin-left: 10px;
}

/* Buttons Hover-Stile */
#decrement-time-button:hover,
#increment-time-button:hover,
#start-slideshow-button:hover,
#stop-slideshow-button:hover {
    transition: 0.3s;
    color: rgba(0, 0, 0, 0.6);
}

[nighteyeplgn="active"] #decrement-time-button:hover,
[nighteyeplgn="active"] #increment-time-button:hover,
[nighteyeplgn="active"] #start-slideshow-button:hover,
[nighteyeplgn="active"] #stop-slideshow-button:hover {
    transition: 0.3s;
    color: rgba(255, 255, 255, 0.8);
}

/* - Bildzähler allgemeine Stile - */
.featherlight-counter {
    color: rgba(0, 0, 0, 0.45);
}

[nighteyeplgn="active"] .featherlight-counter {
    color: rgba(255, 255, 255, 0.5);
}

/* Bildzähler für Mobilgeräte */
@media screen and (max-width: 590px) {
    .featherlight-counter {
        position: absolute;
        display: flex;
        flex-direction: row;
        top: -200%;
        left: 45%;

        font-size: 18px;
        font-weight: 500;
    }
}

@media only screen and (min-width: 591px) and (max-width: 768px) {
    .featherlight-counter {
        position: relative;
        display: flex;
        flex-direction: row;
        left: 2%;
        font-size: 18px;
        font-weight: 500;
    }
}

/* Bildzähler für Laptops und Desktops */
@media screen and (min-width: 769px) {
    .featherlight-counter {
        position: absolute;
        top: 155%;
        padding: 5px 10px;
        font-size: 18px;
        font-weight: 500;
    }
}

/* - Diashow-Button-Steuerung für Desktop und Mobil,
 * Bildzähler immer sichtbar zs. JS */

#slideshow-buttons button,
#slideshow-buttons #current-time-display {
    opacity: 0;
    transition: opacity 0.5s ease;
}

#slideshow-buttons:hover button,
#slideshow-buttons:hover #current-time-display {
    opacity: 1 !important;
    transition: opacity 0.5s ease;
}

/* = Ende WP Featherlight Diashow: Abspiel-Buttons mit Zeitvorwahl und 
 * Bildzähler, autom. Ausblendung und 
 * Bildzähler stets visuell = */

Ende

Als Abschluss möchten wir die Anfänge der Entwicklung: Diashow mit Abspiel-Buttons zeigen.

Die Anfänge der Entwicklung: Diashow mit Abspiel-Buttons

Diashow allein mit Play und Pause Button.

  • Alternative mit Play und Pause Button mit Dashicon.
  • Hierbei kann eine fixe Zeitdauer im JavaScript festgelegt werden.
  • Füge einfach den folgenden Code in die JavaScript-Datei des Child-Themes ein:
/* --- WP Featherlight Diashow mit Abspiel-Buttons Dashicons --- */

jQuery(document).ready(function($) {
    // Zeitintervall für das automatische Weiterklicken (in Millisekunden)
    var interval = 6000;
    var intervalId; // Variable zur Speicherung der Interval-ID für das Starten und Stoppen der Diashow

    // Funktion zum Klicken des Weiter-Buttons
    function clickNext() {
        // Weiter-Button finden und klicken
        var nextButton = $('.featherlight-next');
        if (nextButton.length > 0) {
            console.log("Next button found:", nextButton);
            nextButton.trigger('click');
        } else {
            console.log("Next button not found");
        }
    }

    // Funktion zum Starten der Diashow
    function startSlideshow() {
        // Zuerst das nächste Bild anzeigen
        clickNext();
        
        // Dann die Diashow in Intervallen fortsetzen
        intervalId = setInterval(clickNext, interval);
    }

    // Funktion zum Stoppen der Diashow
    function stopSlideshow() {
        clearInterval(intervalId);
    }

    // Funktion zum Hinzufügen der Start- und Stop-Schaltflächen in die Lightbox
    function addSlideshowButtons() {
        // Schaltflächen für die Diashow erstellen
        var slideshowButtons = $('<div id="slideshow-buttons">' +
                                    '<button id="start-slideshow-button"><span class="dashicons dashicons-controls-play"></span></button>' +
                                    '<button id="stop-slideshow-button"><span class="dashicons dashicons-controls-pause"></span></button>' +
                                '</div>');

        // Die Lightbox finden und die Schaltflächen hinzufügen
        $('.featherlight').append(slideshowButtons);

        // Event-Listener für den Start-Button
        slideshowButtons.find('#start-slideshow-button').on('click', function() {
            startSlideshow();
        });

        // Event-Listener für den Stop-Button
        slideshowButtons.find('#stop-slideshow-button').on('click', function() {
            stopSlideshow();
        });
    }

    // Funktion zum Überprüfen, ob das Element Teil einer Galerie ist
    function isGallery(element) {
        return $(element).closest('.gallery').length > 0;
    }

    // Event-Listener für das Öffnen der Lightbox
    $(document).on('click', '[data-featherlight]', function() {
        // Prüfen, ob das angeklickte Element Teil einer Galerie ist
        if (isGallery(this)) {
            // Fügen Sie die Buttons in die Lightbox ein, wenn sie zu einer Galerie gehören
            addSlideshowButtons();
        }
    });

    // Event-Listener für das Schließen der Lightbox
    $(document).on('click', '.featherlight-close', function() {
        // Stoppen Sie die Diashow, wenn die Lightbox geschlossen wird
        stopSlideshow();
    });
});

/* Ende WP Featherlight Diashow mit Abspiel-Buttons Dashicons */

In dieser Variation wurden die Dashicons (dashicons dashicons-controls-play und -pause) im JS festgelegt.

Das CSS für die automatische Diashow ist verbindlich, jedoch kann das Aussehen der Buttons variiert werden.

/* === WP Featherlight-Variante mit Abspiel-Buttons === */

/* --- Lightbox-Stile --- */

/* Hintergrund der Lightbox */
.featherlight:last-of-type {
    background: rgba(0, 0, 0, 0.9);
}

[nighteyeplgn="active"] .featherlight:last-of-type {
    background: rgba(0, 0, 0, 1);
}

/* Größe des Bildes in der Lightbox */
.featherlight .featherlight-image {
    max-width: 80vw;
    max-height: 80vh;
    width: auto;
    height: auto;
}

/* Box-Schatten und abgerundete Ecken der Lightbox */
.featherlight .featherlight-image {
    box-shadow: 0 0 0 25px rgba(230, 230, 230, 1);
    border-radius: 0.2vw;
}

@media (max-width: 424px) {
    .featherlight .featherlight-image {
        box-shadow: 0 0 0 6px rgba(230, 230, 230, 1);
        border-radius: 0.2vw;
    }
}

@media (min-width: 425px) and (max-width: 768px) {
    .featherlight .featherlight-image {
        box-shadow: 0 0 0 10px rgba(230, 230, 230, 1);
        border-radius: 0.3vw;
    }
}

/* Lightbox Abgerundete Ecken. Sofern der Box-Schatten nicht angewendet wird, kann man das anwenden. Das bezieht sich auch auf die Größe des Bildes in der Lightbox. */
/*.featherlight-content {
    border-radius: 1vw;
}

.featherlight .featherlight-image {
    border-radius: 1vw;
}*/

/* Beschriftung in der Lightbox, das bezieht sich direkt auf den Box-Schatten */
.featherlight .featherlight-content .caption {
    color: rgba(0, 0, 0, 0.4);
    font-size: 1.15em;
    font-weight: 400;
    line-height: 1.3;
    text-align: center;
    left: 0;
    right: 0;
}

/* Bildbeschriftung auf Mobilgeräte und Tablets befindet sich oberhalb */
@media (max-width: 424px) {
    .featherlight .featherlight-content .caption {
        top: -50%;
    }
}

@media (min-width: 425px) and (max-width: 768px) {
    .featherlight .featherlight-content .caption {
        top: -30%;
    }
}

/* Beschriftung in der Lightbox, die sich auf ohne Box-Schatten bezieht */
/*.featherlight .featherlight-content .caption {
    color: rgba(255,255,255, 0.8);
    font-size: 1.15em;
    font-weight: 400;
    line-height: 1.3;
    text-align: center;
    left: 0;
    right: 0;
}*/

/* Beschriftung in der Lightbox im Nachtmodus */
[nighteyeplgn="active"] .featherlight .featherlight-content .caption {
    color: rgba(255, 255, 255, 0.5);
}

/* Button für das nächste/vorherige Bild */
.featherlight-next,
.featherlight-previous {
    top: 60%;
    opacity: 0.5;
}

@media screen and (max-width: 768px) {
    .featherlight-next,
    .featherlight-previous {
        top: 90%;
    }
}

.featherlight-next:hover,
.featherlight-previous:hover {
    transition: 0.3s;
    opacity: 0.8;
}

/* Schließen-Button */
.featherlight-close-icon.featherlight-close {
    opacity: 0.5;
}

.featherlight-close-icon.featherlight-close:hover {
    opacity: 0.8;
}

/* - Ende Lightbox-Stile - */

/* --- Diashow: Abspiel-Buttons und Stile --- */

@media screen and (max-width: 768px) {
    #slideshow-buttons {
        position: fixed;
        display: flex;
        flex-direction: row;
        left: 50%;
        top: 90%;
        transform: translate(-50%, -50%);
        align-items: center;
        cursor: default;
        margin: 0 15px 0 15px;
    }

    #slideshow-buttons button {
        margin: 5px 0 0 -35px;
    }

    #slideshow-buttons button:first-child {
        margin-right: 25px; /* Ändere den Abstand nach Bedarf */
    }

    #slideshow-buttons button:last-child {
        margin-left: 25px; /* Ändere den Abstand nach Bedarf */
    }
}

@media (min-width: 769px) {
    #slideshow-buttons {
        position: absolute;
        top: 50%;
        transform: translateY(-180%);
        right: 21px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

#slideshow-buttons button {
    margin: 5px 0;
    padding: 6px 9px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

@media screen and (max-width: 768px) {
    #slideshow-buttons button {
        margin-left: -33px;
    }

    #slideshow-buttons button:first-child {
        margin-right: 25px; /* Ändere den Abstand nach Bedarf */
    }
}
#start-slideshow-button {
    background-color: #4caf50;
    color: white;
}

#stop-slideshow-button {
    background-color: #f44336;
    color: white;
}

/* - Ende Diashow: Abspiel-Buttons und Stile - */

/* = Ende WP Featherlight-Variante mit Abspiel-Buttons = */

Das ist allein mit einem Play- und Pause-Button.

Beispiel Einzelbild – eigenständig in der Lightbox! Die Navigationsschaltflächen sind nicht verfügbar:

Ländlich, Landschaft
Ländlich

Eija, es gibt noch etwas zum Schnuppern

Eija, da gibt es auch noch etwas zum Schnuppern ➳ Open example.com in an iframe. Das Weiterklicken nach GitHub funktioniert nicht, da GitHub die Verbindung in einem iFrame ablehnt. Daher ist hier auch der direkte Link: Featherlight.js The ultra slim lightbox. Die Inhalte, die auf GitHub zu sehen sind, sind bereits im WordPress-Plug-in "Featherlight" enthalten und es ist u. a. solches zu sehen, wie das Beispiel hier mit iFrame in der Lightbox zeigt.

 

Maskottchen
Vielen Dank für dein Interesse an unserem Lightbox-Beitrag!