Question

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

对＆gt;下一张图片

向下＆gt;第三张图片（表示＆＃34;下一张＆＃34; x 2）

有可能吗？谢谢你的帮助。

Answer 1

首先，您可能需要使用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不会将任何事件绑定到它。

然后，我们可以绑定 keydown 事件到beforeShow fancybox回调中的向下箭头（我们可以将其关闭）在关闭fancybox之后）从图库的当前元素推进 2 位置。我们将使用fancybox $.fancybox.jumpto()方法，但传递当前参数而不是硬编码的索引值，如：

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

Answer 2

您可以通过挂钩到FancyBox公共方法手动添加此功能：

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

fancybox.jumpto()函数将显示指定索引处的项目（在本例中为第三项）。您可以了解有关FancyBox here的公共方法的更多信息。

Answer 3

我需要承认这可能是一个非常普遍的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")作为选择器;但是，这需要在上面的代码运行之前存在该元素。

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

3 个答案: