Question

I have a page where I need to use 2 different FancyBox styles for different elements on the page. To achieve that, I added tpl option and modified stylesheet accordingly. Here is what I have:

$(document).ready(function() {
$(".login").fancybox({
    closeClick  : false,
    closeBtn : true,
    tpl: {
        wrap     : '<div class="fancybox-wrap1" tabIndex="-1"><div class="fancybox-skin1"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>',
        closeBtn : '<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>'
        }
    });
});

In my CSS, I added new styles for .fancybox-wrap1 and .fancybox-skin1. Styles work great BUT on the FancyBox with modified template “close” button completly disappears! I tried both adding and deleting closeBtn from tpl but it doesn’t seem to make any difference.

I also have a demo here (eventually I will need different background-images for FancyBox, not just background-color, that’s why I’m doing it).

What am I doing wrong? Any help will be greatly appreciated!

Answer 1

Your .fancybox-skin1 div still needs to have the fancybox-skin class applied to it. If you look at the Fancybox code version 2.1.2 (sometimes that’s the only way to figure things out when they aren’t well documented) you’ll see that it finds the skin by searching for that class (line 884):

$.extend(coming, {
                skin  : $('.fancybox-skin',  coming.wrap),
                outer : $('.fancybox-outer', coming.wrap),
                inner : $('.fancybox-inner', coming.wrap)
            });

then it uses that reference to append the closeBtn (line 1440):

// Create a close button
            if (current.closeBtn) {
                $(current.tpl.closeBtn).appendTo(F.skin).bind('click.fb', F.close);
            }