Recently I used the jQuery extension Fancybox, a Lightbox alternative for jQuery in a project. The web-application had to work in IE7 and I was having some problems that certain page elements were invisible on page-load until you clicked on them. During my search for a solution I found several other people having troubles with IE7 and Fancybox, but no real solution. Here’s what did the trick for me.

Note: I never got to the bottom of the actual problem, partly because I don’t really care for the quirks of 6 year old browsers. I imagine it has something to do with Fancyobx inserting elements into the DOM before it is actually completely loaded (Fancybox init’s itself on-domready).

The fix is a hack for IE

Part 1

Somewhere near the bottom of the fancybox.js, there’s a call to

$.fancybox.init();

I changed this to delay Fancybox init until window is fully loaded for IE <= 7:

// delay fancybox init for old IE versions
if ($.browser.msie && $.browser.version <= 7) {
  $(window).load(function() {
    $.fancybox.init();
    // set a flag that fancybox is loaded and ready
    window.fancybox_is_ready = true;
  });
}
// the normal case (most browsers)
else {
  $(document).ready(function() {
    $.fancybox.init();
  });
}

Part 2

Locate where the $.fancybox() function is defined:

$.fancybox = function(obj) {

And add this to as the first thing in the function:

// delay fancybox ondomready registrations to window.load if fancybox
// isn't ready yet
if ($.browser.msie && $.browser.version <= 7 && !window.fancybox_is_ready) {
  $(window).load(function() {
    $.fancybox(obj);
  });

  return;
}

Explanation

In part 1, we delay Fancybox initialization until page is fully loaded, we also set a flag that Fancybox is ready. Part 2 is in case Fancybox is registered to be shown on-domready anywhere, in this case we delay the call until page is loaded if Fancybox isn’t ready yet.

That’s about it. Hope this helps someone.