CODEWITHSUNDEEP
jqueryfancybox-2
Toon
Toon

Reputation: 652

Fancybox 2 defaults override

I'm trying to override fancybox default settings with this code:

jQuery.extend(jQuery.fancybox.defaults, {
    padding: 25,
    margin: [20, 65, 20, 65]
});

It works perfect. But it stops working, when i try to override templates options like this:

jQuery.extend(jQuery.fancybox.defaults, {
    padding: 25,
    margin: [20, 65, 20, 65],
    tpl: {
        closeBtn: '<a href="javascript:;">custom code</a>',
        next: '<a href="javascript:;" >custom code</a>',
        prev: '<a href="javascript:;">custom code</a>'
    }
});

What's the problem?

Upvotes: 2

Views: 3212

Answers (2)

Marat Gallyamov
Marat Gallyamov

Reputation: 197

The idea is to extend "tpl" property itself. My code look like this:

$.extend($.fancybox.defaults.tpl, {
    closeBtn: '<a class="custom" href="javascript:void(0);">custom</a>'
});

I also extend "defaults" property like this:

$.extend($.fancybox.defaults, {
    closeBtn: true,
    openEffect: "none",
    closeEffect: "none",
});

This is what I use. Hope it will help.

Upvotes: 2

alesnav
alesnav

Reputation: 223

You must declare every template code because if you change fancybox defaults, the whole "tpl" var will be overwritten. This way, you won't be able to use any fancybox window, because the javascript code will not retain the other templates.

So, you must overwrite each one, this way:

$.extend($.fancybox.defaults, {
    tpl: {
        wrap     : '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>',
        image    : '<img class="fancybox-image" src="{href}" alt="" />',
        iframe   : '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0"></iframe>',
        error    : '<p class="fancybox-error">The requested content cannot be loaded.<br/>Please try again later.</p>',
        closeBtn : '<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>',
        next     : '<a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"><span></span></a>',
        prev     : '<a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><span></span></a>'
    }
});

You can modify the above code, of course!

Upvotes: 0

Related Questions