Fancybox 3 jQuery:单击外部元素时关闭画廊

Question

我在单击父元素或外部元素时很难退出。

。

fancybox 3选项文档（http://fancyapps.com/fancybox/3/docs/#options）状态：

// Interaction
// ===========
// Use options below to customize taken action when user clicks or double clicks on the fancyBox area,
// each option can be string or method that returns value.
//
// Possible values:
//   "close"           - close instance
//   "next"            - move to next gallery item
//   "nextOrClose"     - move to next gallery item or close if gallery has only one item
//   "toggleControls"  - show/hide controls
//   "zoom"            - zoom image (if loaded)
//   false             - do nothing
// Clicked on the content
clickContent : function( current, event ) {
    return current.type === 'image' ? 'zoom' : false;
},
// Clicked on the slide
clickSlide : 'close',
// Clicked on the background (backdrop) element
clickOutside : 'close',

以下是我的JS文件：

$("[data-fancybox]").fancybox({
    loop : true,
  toolbar : true,
  buttons : [
    'close'
  ],
  clickOutside : 'close',
});

我正在使用组选项启用画廊。

data-fancybox="group"

我已经尝试了几件事，似乎还无法使它工作。非常感谢帮助，请注意。很抱歉缺乏信息，我必须出发。

Answer 1

很难理解问题（添加codepen）

如果需要 - 单击图像以关闭图库，这是代码（从" Zoom"更改为"关闭"（条件（Ternary）操作员））

）

// Clicked on the content
clickContent : function( current, event ) {
    return current.type === 'image' ? 'close' : false;
},

您也做错了实施。这是默认值值：

clickOutside : 'close', /* i am default */

如果您写这篇文章：

clickOutside : 'toggleControls', 

结果：现在，当您单击覆盖区域（黑色）时 - 显示/隐藏控件。

Answer 2

对不起我的英语。我希望我对你说对了。我只是在图像画廊遇到了类似的麻烦。而且我对交互选项的名称感到恼火。对我来说，工作选项" clickslide"这样，您应该能够控制如果单击打开幻灯片但（图像）内容外会发生什么。而不是使用" togglecontrols"，您可以使用false。希望有帮助

 $("[data-fancybox]").fancybox({
            clickSlide: 'toggleControls'
        });