How can I set default (global) options for helpers?

Question

I need to fix the problem with body element and the css overflow attribute discussed in this post: When a fancybox 2 is activated, a scrollbar flashes on the parent page causing the content to shift left and then back

Using the helper option helpers: {overlay: {locked: false}} fixes my problem, but I need a solution to set this option for all Fancybox calls, this way I do not need to spend this setting on each call.

I tried with different forms, but doesn't works:

$.fancybox.open([{
    helpers: {
        overlay: {
            locked: false
        }
    }
}]);

$.extend($.fn.fancybox.helpers, {
    overlay: {
        locked: false
    }
});

$.fn.fancybox.defaults.overlay.locked = false;

I do not want to change the css component, because currently use the same via Bower.

are you binding fancybox to different selectors? – JFK Dec 12 '13 at 21:12 — JFK, Dec 12 '13 at 21:12
@JFK Yes, for many different selectors. – Fred Wuerges Dec 18 '13 at 14:50 — Fred Wuerges, Dec 18 '13 at 14:50

score 0 · Answer 1 · answered Apr 10 '15 at 14:54

You could setup an object with this setting that you use in all of your fancyBox calls:

var fancyBoxDefaults = 
{
    helpers: {
        overlay: {
            locked: false
        }
    }
};
$(".fancybox1").fancybox(fancyBoxDefaults);
$(".fancybox2").fancybox(fancyBoxDefaults);

If you need to set settings for any specific fancyBox, you could extend the object:

$(".fancybox3").fancybox($.extend(fancyBoxDefaults,{
    maxWidth: 800,
    maxHeight: 600
}));

How can I set default (global) options for helpers?

1 Answers1