Tastaturbefehle in Lightbox einfügen

Hallo und guten Abend!
Ich bin gerade dabei eine Bildergalerie mit entsprechender Lightbox zu erstellen. Nun funktioniert alles soweit so gut, allerdings würde ich gerne noch Tastaturbefehle – also Pfeiltasten vor und zurück, sowie Schließen der Lightbox mit esc – einfügen. Leider sind bisher alle Versuche gescheitert. Was und wo genau muss wie dafür eingefügt werden? Vielleicht wäre hier jemand so freundlich, sich das mal anzuschauen. Vielen Dank! Der Grundcode ist folgender:


Javascript:
(function ($) {
    'use strict'; // Strict mode

    var $lightboxContainer = $(
        '<div id="lightbox"><div class="lightbox-inner"><div class="controls"><div class="galleryPrev"><span class="ion-ios-arrow-left"></span></div><div class="galleryNext"><span class="ion-ios-arrow-right"></span></div><div class="galleryClose ion-ios-close-empty fa-2x"></div></div></div>'
    );
    if ($('.lightbox').length) $('body').append($lightboxContainer);
    var $gallery = [],
        $galleryCaption = [],
        $galleryIndex = 0,
        $lightboxInner = $('body').find('.lightbox-inner');

    function isYoutube(url) {
        var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
        return url.match(p) ? RegExp.$1 : false;
    }

    function isVimeo(url) {
        var p = /player\.vimeo\.com\/video\/([0-9]*)/;
        return url.match(p) ? RegExp.$1 : false;
    }

    $('.lightbox').each(function () {
        // For each lightbox link
        var href = $(this).attr('href');
        var caption = $(this).attr('data-caption');
        $gallery.push(href); // Push the img url to the gallery array
        $galleryCaption.push(caption);
        $(this).attr('data-index', $galleryIndex);
        $galleryIndex++; // Next index
        $(this).on('click', function (e) {
            e.stopImmediatePropagation();
            loadLightbox($(this).attr('data-index'), href, caption);
            e.preventDefault();
        });
    });

    $('body').on('click', '.galleryClose', function (e) {
        $lightboxContainer.fadeOut(500, function () {
            $(this).find('.lightbox-item').remove(); // Remove contents
        }); // Fade out lightbox
    });

    $('html').on('click', 'body', function (e) {
        $lightboxContainer.fadeOut(500, function () {
            $(this).find('.lightbox-item').remove(); // Remove contents
        }); // Fade out lightbox
    });

    // Lightbox controls
    $('html').on('click', '.galleryNext, .galleryPrev', function (e) {
        e.preventDefault();
        e.stopImmediatePropagation();
        var curIndex = parseInt($('.lightbox-item').attr('data-index'));
        var newIndex;
        if ($(this).hasClass('galleryNext')) newIndex = curIndex + 1;
        // New index will be the next one
        else newIndex = curIndex - 1; // New index will be the previous one
        if ($gallery.length == newIndex)
            // If the last item is reached
            newIndex = 0; // Set index to the first one
        if (newIndex == -1)
            // If the first item is reached
            newIndex = $gallery.length - 1; // Set it to the last item
        $('#lightbox [data-index]').css({
            opacity: 0,
            transform: 'scale(.95)',
            transition: 'opacity .3s, transform .3s',
        });
        $('.galleryClose').css({
            opacity: 0,
        });
        setTimeout(function () {
            $('#lightbox [data-index]').attr('data-index', newIndex); // Give the image a new index
            loadLightbox(newIndex, $gallery[newIndex], $galleryCaption[newIndex]);
        }, 200);
    });

    function loadLightbox(index, href, caption) {
        var $index = index,
            $lightboxItem,
            $lightboxCaption = $('<div class="caption">' + caption + '</div>');
        $lightboxContainer.find('.lightbox-item').remove();
        $lightboxContainer.find('.caption').fadeOut(200, function () {
            $(this).remove();
        });
        if (href.indexOf('.mp4') > -1) {
            $lightboxItem = $(
                '<video class="lightbox-item" autoplay loop data-index="' +
                    $index +
                    '"><source src="' +
                    href +
                    '" type="video/mp4"></video>'
            );
            $lightboxInner.append($lightboxItem).parent().fadeIn().css('display', 'flex'); // Fade in lightbox
            setTimeout(function () {
                $('.lightbox-item').css({
                    opacity: 1,
                    transform: 'scale(1)',
                }); // Fade in video
            }, 500);
        }
        if (isYoutube(href) || isVimeo(href)) {
            // Check if it's Vimeo or YouTube
            $lightboxItem = $(
                '<iframe class="lightbox-item" src="' +
                    href +
                    '" frameborder="0" allowfullscreen data-index="' +
                    $index +
                    '"/></iframe>'
            );
            $lightboxInner.append($lightboxItem).parent().fadeIn().css('display', 'flex'); // Fade in lightbox
            setTimeout(function () {
                $('.lightbox-item').css({
                    opacity: 1,
                    transform: 'scale(1)',
                }); // Fade in video
            }, 500);
        } else {
            $lightboxItem = $('<img class="lightbox-item" src="' + href + '" data-index="' + $index + '"/>');
            $lightboxItem = $lightboxItem.load(function () {
                $lightboxInner.append($(this)).parent().fadeIn().css('display', 'flex'); // Fade in lightbox
                setTimeout(function () {
                    $lightboxItem.css({
                        opacity: 1,
                        transform: 'scale(1)',
                    }); // Fade in image
                }, 500);
            });
        }
        if (caption) {
            $lightboxContainer.append($lightboxCaption);
            $lightboxCaption.delay(200).fadeIn(); // Fade in caption
        }
        setTimeout(function () {
            $('.galleryClose').css({
                opacity: 1,
            });
        }, 1300);
    }
})(jQuery);
 
Zuletzt bearbeitet von einem Moderator:
Was hast du denn bisher versucht?

Habe mir jetzt nicht alles im Detail angeschaut. Grundsätzlich hast du aber für das Schließen sowie die Navigation vor und zurück doch bereits gute Vorlagen im Code drin.
Diese Aktionen könntest du dann bei entsprechender Tastatureingabe wiederholen bzw. in eine Funktion auslagern und so ebenso aufrufen, wie bei der Bedienung durch Mausklick.

Beispiel:
Zusätzlich zu...
Zeile 38-42:
$('body').on('click', '.galleryClose', function (e) {
    $lightboxContainer.fadeOut(500, function () {
        $(this).find('.lightbox-item').remove(); // Remove contents
    }); // Fade out lightbox
});
...könntest du einen Event Handler für die ESC-Tastatureingabe einrichten und dann die gleiche Aktion zum Schließen ausführen.

Könnte dann so aussehen:
Javascript:
$(document).on('keyup', function (e) {
    if (!e.key || e.key !== 'Escape' || e.key !== 'Esc') return;

    $lightboxContainer.fadeOut(500, function () {
        $(this).find('.lightbox-item').remove(); // Remove contents
    }); // Fade out lightbox
});

Achtung, ungetestet und sicherlich nicht perfekt, aber das Grundprinzip sollte klar sein.
 
Zurück
Oben Unten