Question

I would like to use html instead of an image for the fancybox close button.

Here’s what I think should work:

$('.fancybox-media').fancybox({
    afterLoad : function() {
        $('div.fancybox-close').html('X');
    }
});

Just focusing on the close button here. Any ideas why this isn’t working?

Answer 1

For fancybox v2.x you can use the option tpl to set whatever html you want like

$(".fancybox").fancybox({
 tpl: {
  closeBtn: '<div title="Close" id="myCloseID ">[CLOSE]</div>'
 }
});

Notice that in this example I set my own selector id="myCloseID " to the close container (closeBtn) so I can add my own css style to the new html like :

#myCloseID {
 position: absolute; /* this is important */
 z-index: 8040; /* this is important */
 top: -18px; /* or whatever needed */
 right: -10px;
 width: 50px; /* or whatever needed */
 height: 36px;
 cursor: pointer;
 color : #ff0034; /* or whatever needed */
 /* etc. */
}

Eventually, you may prefer to use the default tpl for the closeBtn with your own html

$(".fancybox").fancybox({
 tpl: {
  closeBtn: '<div title="Close" class="fancybox-item fancybox-close">[my closing html]</div>'
 }
});

…and just remove the background image through css like

.fancybox-close {
 background-image: none; /* prevents the use of the fancybox sprite */
 color : #ff0034; /* or whatever needed, etc. */
 /* etc. */
}