Inserting HTML to fancybox close button

fancybox, fancybox-2, jquery

Solution

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. */
}

Problem

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?

Original source