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

Question

Good day.

I have such type of problem: when fancyBox gallery is opened and I just click on opened image (slide), image is zooming. I need to disable such behavior.

In documentation there is advice to use clickContent event for customizing behavior. I take example from documentation and initialize my copy of gallery by the next way:

$("[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
});

but clickContent override doesn't work. I have tried console.log() clickContent event:

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

but I didn't succeed.

Maybe I'm making a mistake somewhere. Please correct me. Thank you in advance!

Answer 1

Update to v3.1 and use clickContent option to choose the action when user clicks on the content. 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 successfully)
false             - do nothing

It can also be function that returns value from the list. Default value:

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

Also, your snippet works fine - https://codepen.io/anon/pen/GvNdJE