如何使用向下和下一个箭头键更改键盘导航？

Question

我想在我的 FancyBox 中更改向下键的行为而不更改下一个键的行为。

右 > 下一张

向下 > 第三张图片（表示 "next" x 2）

可能吗？感谢您的帮助。

Answer 1

您可以通过挂接到 FancyBox public 方法来手动添加此功能：

$(document).on('keyup', function(e) {  
    switch(e.keyCode)
    {
        // The down arrow == 40:
        case 40:
            $.fancybox.jumpto(2);
            break;
    }
});

fancybox.jumpto() 函数将显示指定索引处的项目（在本例中为第三个项目）。您可以进一步了解 FancyBox public 方法 here.

Answer 2

我需要承认这可能是一个非常笼统的 jQuery 答案，但对于任何对替代方法感兴趣的人，这里是代码：

$(document).keydown(function(e) {
    if ($(".fancybox").length == 0) return;/* check if element exists; */
    if (e.keyCode == 40){                  /* 40 = down key */
        e.preventDefault();
        var e = jQuery.Event("keydown");   /* get a template event object */
        e.which = 39;                      /* Change it to "right key" */ 
        $(document).keydown(e);            /* Trigger the event two times */
        $(document).keydown(e);
    }
});

应该注意，如果要停止该功能，使用 length 属性需要完全删除 DOM 中的元素。另一种方法是使用 $(".fancybox") 作为选择器；但是，这将要求该元素在上述代码运行之前就已经存在。

Answer 3

首先，您可能需要使用 API 选项 keys 重新分配 箭头键 行为，例如：

keys: {
    next: {
        13: "left", // enter
        34: "up", // page down
        39: "left", // right arrow
        // 40: "up" // disable down key
    },
    prev: {
        8: "right", // backspace
        33: "down", // page up
        37: "right", // left arrow
        38: "down" // up arrow
    },
    close: [27], // escape key
    play: [32], // space - start/stop slideshow
    toggle: [70] // letter "f" - toggle fullscreen
}

注意我们在API选项

中注释掉了下键(40)

// 40: "up" // disable down key

...所以 fancybox 不会绑定任何事件。

然后，我们可以 bind keydown event 到 beforeShow fancybox 中的向下箭头回调（我们可以在关闭 fancybox 后将其关闭）以从图库的 current 元素前进 2 个位置。我们将使用 fancybox $.fancybox.jumpto() 方法，但传递当前参数而不是像 :

这样的硬编码 index 值

jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        // API options
        keys: {
            next: {
                13: "left", // enter
                34: "up", // page down
                39: "left", // right arrow
                // 40: "up" // disable down key
            },
            prev: {
                8: "right", // backspace
                33: "down", // page up
                37: "right", // left arrow
                38: "down" // up arrow
            },
            close: [27], // escape key
            play: [32], // space - start/stop slideshow
            toggle: [70] // letter "f" - toggle fullscreen
        },
        beforeShow: function () {
            $(document).on("keydown", function (e) {
                e.preventDefault();
                var code = e.which || e.keyCode;
                if (code == 40) {
                    // advance to the third image from the current
                    $.fancybox.jumpto($.fancybox.current.index + 2)
                }
            });
        },
        afterClose: function () {
            // unbind the keydown event
            $(document).off("keydown")
        }
    }); // fancybox
}); // ready

如何使用向下和下一个箭头键更改键盘导航？

How change keyboard navigation with down and next arrow key?

jquery

fancybox