1

单击父元素或外部元素时，我无法让 Fancybox 3 退出。

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"

我已经尝试了一些东西，但似乎还不能让它工作。非常感谢您的帮助，请保重。抱歉信息不全，我得走了。

4

2 回答 2

1

很难理解问题（添加codepen）

如果你想 - 点击图片关闭画廊这是代码（从“缩放”更改为“关闭”（条件（三元）运算符））

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

你也做错了。这是默认值：

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

例如，如果您这样写：

clickOutside : 'toggleControls',

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

于 2017-11-21T00:08:45.320 回答
0

首先对不起我的英语。我希望我说对了。我刚刚在图片库中遇到了类似的问题。我对交互选项的名称感到恼火。对我来说，工作选项“clickSlide”这样你应该能够控制如果你点击打开的幻灯片但在（图像-）内容之外会发生什么。您可以使用 false，而不是使用“toggleControls”。希望有帮助

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

于 2018-05-16T12:24:47.940 回答