Fancybox close button not showing when using different template
- by VeraG
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!
