javascript - fancyBox3 - 如何在单击打开的图像时禁用缩放

Question

美好的一天。

我遇到这样的问题:当打开 fancyBox 画廊并且我只需单击打开的图像(幻灯片)时，图像正在缩放。我需要禁用这种行为。

文档中建议使用 clickContent 事件来自定义行为。我从文档中获取示例，并通过以下方式初始化我的图库副本:

$("[data-fancybox]").fancybox({
    clickContent : function( current, event ) {
        // return current.type === 'image' ? 'zoom' : false;
        if (current.type === 'image') {
            return false;
        }
    },
    slideShow: false,
    fullScreen: false,
    thumbs: false
});

但是 clickContent 覆盖不起作用。我尝试过 console.log() clickContent 事件:

$("[data-fancybox]").fancybox({
    clickContent : function( current, event ) {
        // return current.type === 'image' ? 'zoom' : false;
        console.log('clicking test!');
    },
    slideShow: false,
    fullScreen: false,
    thumbs: false
});

但是我没有成功。

也许我在某个地方犯了错误。请纠正我。预先感谢您!

Answer 1

更新到 v3.1 并使用 clickContent 选项来选择用户单击内容时的操作。可能的值:

"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 successfully)
false             - do nothing

它也可以是从列表中返回值的函数。默认值:

clickContent : function( current, event ) {
  return current.type === 'image' ? 'zoom' : false;
}

此外，您的代码片段工作正常 - https://codepen.io/anon/pen/GvNdJE