CODEWITHSUNDEEP
jqueryfancybox-3
user9405361
user9405361

Reputation:

Closing Fancybox 3 on a mobile device

Using fancybox on desktop, it closes when clicked outside the content. Using it on a mobile device, it closes ONLY when the content is slided up or down (it doesn't react to clicking outside the content).

Is it possible (and how) to close fancybox on a mobile device just by clicking outside the content ?

Upvotes: 0

Views: 3324

Answers (3)

Roland
Roland

Reputation: 1

This is the solution that worked for me using Fancybox 3.5.7 modifying the mobile section of the original source code in the mobile section:

mobile: {
                preventCaptionOverlap: !1,
                idleTime: !1,
                clickContent: function (t, e) {
                    return "image" === t.type && "close";
                },
                clickSlide: function (t, e) {
                    return "image" === t.type && "close";
                },

Someone asked about the delay above. The delay happens on click to understand if there will be a double click. Time is needed to see if another click comes in, if not, then the image closes. So if you (as in my example) remove the doubleclick functionality (dblclickContent & dblclickSlide) this removes that delay issue.

Upvotes: 0

Janis
Janis

Reputation: 8769

fancyBox has different "click event" for mobile devices and you can customize them using "mobile" option, for example:

mobile : {
    clickContent : "close",
    clickSlide : "close"
}

Upvotes: 5

ALOMGIR HOSSEN
ALOMGIR HOSSEN

Reputation: 69

This example try it :

$('[data-fancybox]').fancybox({
  clickContent : function( current, event ) {
    return current.type === 'image' ? 'zoom' : 'close';
  }
});

and this link try it : https://codepen.io/anon/pen/WEKmoB

Upvotes: 0

Related Questions