关闭Fancybox 2宽度在图库模式下不能使用 [英] Close Fancybox 2 width Focus don't work in gallery mode

问题描述

Fancybox 2有问题。
当Fancybox处于图库模式时，我用焦点（键盘输入键）关闭Fancybox，它移动到第二个图像。我不能用键盘关闭我的Fancybox（ESC除外），它只能用鼠标。

您可以在这里测试 http://jsfiddle.net/korigan/qfxZd/2/

<$ p $ （）{
focusLink = this;
}）。
$（'a，input，button'）。attr（'tabIndex'，-1）;
$（'。fancybox-overlay a，.fancybox-overlay button，.fancybox-overlayinput'） .attr（'tabIndex'，0）;
}，
afterClose：function（）{
focusLink.focus（）;
$（'a，button，input'） .attr（'tabIndex'，0）;
}，
}）;

感谢您的帮助。

解决方案Fancybox有键选项来设置特定按键的行为....默认为输入键从 left 导航到下一张图库。您可以通过声明一组键来移动到下一个图像，省略 输入键（数值= 13 ），所以它将从堆栈中移除，如：

 键：{
下一个：{
 // 13：'left'，//输入键不会做任何事情（left是默认行为） 
 34：'up'，//下页
 39：'left'，//右箭头
 40：'up'//向下箭头
} 
 } 
  

另外，您可以设置输入关键关闭 fancybox在相同的选项，如：

 键：{
 close： [13]，//现在输入密钥关闭fancybox 
下一个：{
 // 13：'left'，//输入不显示左边的下一个图像
 34：'up' ，//向下翻页
 39：'left'，//向右箭头
 40：'向上'//向下箭头
} 
} 
  

...请参阅 JSFIDDLE

I have a problem with Fancybox 2. When Fancybox is in gallery mode and that I close the Fancybox with the focus (keyboard enter key), it moves to the second image. I can't close my Fancybox with keyboard (except ESC), it works only with mouse.

You can test this here http://jsfiddle.net/korigan/qfxZd/2/

$('.fancybox').click(function(){
       focusLink = this;
   }).fancybox({
    beforeLoad: function() {
        $('a, input, button').attr('tabIndex', -1);
        $('.fancybox-overlay a, .fancybox-overlay button, .fancybox-overlayinput').attr('tabIndex', 0);
    },
    afterClose: function() {
        focusLink.focus();
        $('a, button, input').attr('tabIndex', 0);
    },
});

Thanks for your help.

解决方案

Fancybox has the keys option to set the behavior of specific pressed keys .... the default for enter key is navigate to the next image of a gallery from left. You can override this behavior by declaring the set of keys to move to the next image and omit the enter key (numeric value = 13) so it will be removed from the stack like :

keys: {
    next: {
     // 13: 'left', // enter key will do nothing (left is default behavior)
        34: 'up', // page down
        39: 'left', // right arrow
        40: 'up' // down arrow
    }
}

Additionally, you can set the enter key to close fancybox within the same option like :

keys: {
    close: [13], // enter key now closes fancybox
    next: {
     // 13: 'left', // enter doesn't show next image from left
        34: 'up', // page down
        39: 'left', // right arrow
        40: 'up' // down arrow
    }
}

... see JSFIDDLE

这篇关于关闭Fancybox 2宽度在图库模式下不能使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！