Fancybox 3 JQuery: Close gallery when click outside element

Question

I am having trouble getting Fancybox 3 to exit when a parent element or outside element is clicked.

Fancybox 3 options documentation (http://fancyapps.com/fancybox/3/docs/#options) states the following:

// 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',

Following is my JS file:

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

I am using the group option to enable a gallery.

data-fancybox="group"

I've tried a few things and just can't seem to get it to work yet. Help is greatly appreciated, take care. Sorry for lack of info, I have to head out.

Answer 1

Sorry for my English first. I hope I got you right. I just ran into similar trouble with a gallery of images. And I was irritated by the names of interaction options. For me worked option "clickSlide" In that way you should be able to control what happens if you click on the open slide but outside the (Image-) Content. Instead of using 'toggleControls' you can use false. Hope that helps

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

Answer 2

It's hard to understand the problem (add codepen)

If you want - click on the image to close the gallery this is the code (change from "zoom" to "close" (Conditional (ternary) Operator))

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

Also you are doing wrong implementation. This is the default value:

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

If you write this for example:

clickOutside : 'toggleControls', 

Result: Now when you click on the overlay area (black) - show/hide controls.