Entwicklung Abspiel-Buttons für WP Featherlight

Die folgenden Codes sind hauptsächlich der von Entwicklung. Sie beinhalten jedoch nicht die volle Funktionalität zum Ein- und Ausblenden des Buttons und sind nicht mit der Tastatur bedienbar. Man kann hier den Entwicklungsverlauf beobachten oder die Codes anwenden, da sie funktionell sein sollten.

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

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

Das Beispiel auf dieser Website verwendet Unicode-Zeichen. Im Anschluss befindet sich eine Zusammenfassung inklusive Erweiterungen und Verbesserungen unserer Lightbox in der hier gezeigten Form.

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

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.

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:

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.
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.
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. – und ist usere Empfehlung.

JavaScript: allgemeine Funktion:

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

/* === 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.

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

Unsere Empfehlung, die 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.

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:

Diashow-Button-Steuerung für Maus-Intervall und einer Bildschirmbreite ab 1024 Pixel.
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:

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 Diashow-Buttons könnten auch zusammen mit dem Bildzähler 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;
}

Das Script zur Erweiterung der Tastaturbedienung:

Die Abspielbuttons werden im Folgenden für die Tastaturnavigation definiert. Beim Öffnen der Lightbox wird der Fokus auf den Abspielbutton gesetzt.

Zweck des Codes:
- Der Code ermöglicht die Tastatursteuerung für die Featherlight Lightbox: Mit Enter kann die Lightbox geöffnet werden, und die Tasten Space, ArrowDown und ArrowUp steuern die Interaktion innerhalb der Lightbox.
Funktionen:
- setFocus(element): Setzt den Fokus auf das übergebene Element und speichert es als das aktuell fokussierte Element.
- handleKeyboardNavigation(event): Verarbeitet Tasteneingaben:
  - Enter:
    - Nach dem Öffnen wird der Fokus auf den start-slideshow-button gesetzt.
  - Space: Simuliert einen Klick auf das aktuell fokussierte Element.
  - ArrowDown und ArrowUp: Navigiert durch die Buttons innerhalb der Lightbox.
Event-Listener:
- keydown: Überwacht Tasteneingaben zur Steuerung der Lightbox.
- featherlight-opened: Setzt den Fokus auf den start-slideshow-button, wenn die Lightbox geöffnet wird.
- featherlight-closed: Setzt das Flag featherlightOpen zurück und leert den currentFocusElement, wenn die Lightbox geschlossen wird.
Warum der .featherlight-close Button wichtig ist:
- Die Fokussierung auf den #start-slideshow-button funktioniert zuverlässig, weil das Schließen der Lightbox über den .featherlight-close Button sicherstellt, dass die Lightbox korrekt behandelt wird und der Fokus anschließend gesetzt wird.

/* --- WP Featherlight Tastatursteuerung für Abspiel-Buttons. Schließen: mit Esc oder Enter --- */

document.addEventListener('DOMContentLoaded', function() {
    let featherlightOpen = false;
    let currentFocusElement = null;

    // Funktion zum Setzen des Fokus auf das Element
    function setFocus(element) {
        if (element) {
            element.focus();
            currentFocusElement = element;
        }
    }

    // Funktion zur Handhabung der Tasteneingaben
    function handleKeyboardNavigation(event) {
        if (event.key === 'Enter') {
            const featherlight = document.querySelector('.featherlight');
            const featherlightCloseButton = document.querySelector('.featherlight-close');
            const startSlideshowButton = document.querySelector('#start-slideshow-button');

            if (featherlight && featherlightCloseButton) {
                if (featherlightOpen) {
                    // Schließe die Lightbox, wenn sie bereits geöffnet ist
                    featherlightCloseButton.click();
                    featherlightOpen = false;
                } else {
                    // Öffne die Lightbox, wenn sie nicht geöffnet ist
                    // Hier kannst du das Event oder die Methode zum Öffnen der Lightbox hinzufügen
                    // Beispiel:
                    // document.querySelector('.trigger-lightbox').click();
                    featherlightOpen = true;
                }
            }
            
            if (featherlightOpen && startSlideshowButton) {
                // Setze den Fokus auf den "Start Slideshow"-Button
                setFocus(startSlideshowButton);
                event.preventDefault();
            }
        } else if (event.key === ' ' && currentFocusElement) {
            // Simuliere den Klick auf den aktuellen Button
            currentFocusElement.click();
            event.preventDefault();
        } else if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
            // Finde alle relevanten Buttons in der Lightbox
            const buttons = Array.from(document.querySelectorAll(
                '#start-slideshow-button, #increment-time-button, #decrement-time-button, #stop-slideshow-button'
            ));

            // Bestimme den aktuellen Button und seinen Index
            const currentIndex = buttons.indexOf(currentFocusElement);
            let newIndex = -1;

            if (event.key === 'ArrowDown') {
                newIndex = (currentIndex + 1) % buttons.length; // Zirkular durch die Buttons gehen
            } else if (event.key === 'ArrowUp') {
                newIndex = (currentIndex - 1 + buttons.length) % buttons.length; // Rückwärts zirkulieren
            }

            // Setze den Fokus auf den neuen Button
            if (newIndex >= 0 && newIndex < buttons.length) {
                setFocus(buttons[newIndex]);
                event.preventDefault(); // Verhindere das Standardverhalten der Pfeiltasten
            }
        }
    }

    // Überwache das Öffnen und Schließen der Lightbox
    document.addEventListener('keydown', handleKeyboardNavigation);

    // Event-Listener für das Öffnen der Lightbox
    document.addEventListener('featherlight-opened', function() {
        featherlightOpen = true;
        const startSlideshowButton = document.querySelector('#start-slideshow-button');
        if (startSlideshowButton) {
            setFocus(startSlideshowButton);
        }
    });

    // Event-Listener für das Schließen der Lightbox
    document.addEventListener('featherlight-closed', function() {
        featherlightOpen = false;
        currentFocusElement = null; // Reset des aktuellen Fokus
    });
});

/* - WP Featherlight Tastatursteuerung für Abspiel-Buttons. Schließen: mit Esc oder Enter - */

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

Die Anfänge der Entwicklung:

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.

WP Wegerl.at

Entwicklung Abspiel-Buttons für WP Featherlight

Schaffe mit WordPress und Advanced Editor schöne Websites. Hier ist für dich, euch eine leicht lesbare und freundliche Anleitung.