A better way to add custom buttons to fancybox

So a few people contacted me that the earlier method doesn't work with the new fancybox. The method was a hack into fancybox anyways, and I've (along with our html/css designer and other developers) have a better way to do this. Here it is:

function formatTheTitle(title) {
return ''<div id="fancy-title"><div id="newWindow" class="fancyPopupDivNewWindow" onclick="newWindow()">&nbsp;</div>' + title + '</div>';
}

$("#theDiv").fancybox({
'centerOnScroll': true,
'showCloseButton': true,
'titlePosition': 'inside',
'padding': 0,
'scrolling': 'yes',
'showNavArrows': false,
'titleFormat': formatTheTitle
'title': '',
'type': 'iframe',
});

Basically you can ride on the format title property to add another button to the fancybox. This is the css you require

/* open in new window icon */
.fancyPopupDivNewWindow {
position: absolute;
height: 30px;
width: 30px;
cursor: pointer;
z-index: 800;
display: inline-block;
top: -15px;
right: 18px;
background: transparent url(../images/fancybox/newwindow.png) 0 0 no-repeat;
}