Nextgen Gallery Image Display Errors in Internet Explorer

When I made my first NextGen Gallery in WordPress and clicked one of the thumbnails in IE7, the Gallery displayed the image at the bottom of the browser. About one third of the image and the menu options (close, next, prev) were obscured. VERY ANNOYING.

Rather than debug the default thickkbox presentation code immediately, I installed a different presentation plugin and declared victory.

But Nextgen still uses the thickbox presentation method when view is clicked in the gallery administrative interface. ARRGGGH! Alright, we will debug the damn thing...

I pretty quickly determine the problem to be in this code:

Line 310, thickbox/thickbox.js
if ( !(jQuery.browser.msie && jQuery.browser.version < 7)) { // Take away IE6 $("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'}); }

Note that this version of thickbox is not the same as the distribution thickbox, it has been modified for the nextgen gallery and is included as a subdirectory of the plugin. The problem, however, is not the fault of the plugin but jQuery which it uses. The jQuery.browser.version statement is returning 6.0 in my browser, even though the version is 7.0.6 which causes the code to execute some IE6 only css hacks. Apparently Microsoft changed something which broke jQuery. You can read about that jamazon.co.uk, which I found when googling for a solution to the problem.

The solution is to modify the thickbox/thickbox.js file included with nextgen as follows (add these lines to the top of the file after the comment header):

$.browser.msie6
$.browser.msie6 = $.browser.msie && /MSIE 6\.0/i.test(window.navigator.userAgent) && !/MSIE 7\.0/i.test(window.navigator.userAgent);

Then change:

Line 310, thickbox/thickbox.js
if ( !(jQuery.browser.msie6) ) { // Take away IE6 $("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'}); }

Also note that nextgen doesn't actually load thickbox/thickbox.js. For efficiency, it loads thickbox/thickbox-pack.js. which is thickbox.js with all whitespace removed. So you can run a javascript packing filter like jsmin to produce the packed file or just save the patched thickbox.js to thickbox-pack.js for small loss of efficiency.

You can download my patched files here thickbox-patch.zip.