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
[inline] if ( !(jQuery.browser.msie && jQuery.browser.version < 7)) { // Take away IE6 $("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'}); } [/inline]

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
[inline] $.browser.msie6 = $.browser.msie && /MSIE 6\.0/i.test(window.navigator.userAgent) && !/MSIE 7\.0/i.test(window.navigator.userAgent); [/inline]

Then change:

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

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.

Shutter Reloaded Plugin and Nextgen Gallery

One of the nice things about the Nextgen Gallery Plugin is that it separates gallery management (the presentation, organization and pagination of thumbnails) from presentation effects. You can select from a variety of presentation modules including shutter reloaded, lightbox, thickbox, and others. Most of these presentation modules create a semi-modal CSS overlay on top of your blog's web page that deal with resizing the image to fit the browser window, dimming the page, and offer various options like next, previous, show meta information, etc. So it's really easy to create a professional slide show without writing a line of flash. Nextgen uses thickbox by default, so you don't need to download anything to use it. Unfortunately, due to a problem with jQuery, thickbox doesn't work properly in some versions of IE7. Rather than debug it immediately, I chose to look at the alternatives. Shutter reloaded was the first plugin I looked at, and I am quite pleased with it. The footprint is smaller, its fast and works out of the box. All you have to do is download and install the plugin, then set the Javascript Thumbnail Effect to Shutter in the WP administrative interface (Settings - Gallery - Options - Effects). Sweet. See it in action here when you click on one of the thumbnails in the gallery.

Nextgen Gallery Plugin

I highly recommend the Nextgen Gallery Plugin for managing picture libraries. You can see examples of its use here.

Start by reading David Potter's Introduction to the plugin. 

The biggest issue I ran into is increasing the memory limit for PHP as whole. Fix that by setting
    php_value memory_limit = 48M
in php5.ini AND add the statement
    define('WP_MEMORY_LIMIT', '48M');
to wp-config.php

Setting the value in php5.ini only seems to affect the root directory. So uploading large images still ran out of memory until I also modified wp-config.php.

I also had to increase the php_value max_execution_time in php5.ini as processing some pictures batches takes minutes. Once its setup, using it in posts and pages is simple:

[ slideshow=id,width,height ]
[ album=id,extend ] or [ album=id,compact ]
[ gallery=id ]
[ singlepic=id,width,height,mode,float ]
[ imagebrowser=id ]
[ tags=name,name,name ]
[ albumtags=name,name,name ]

In real code, omit the blank spaces after and before the brackets. There is no way to escape the sequence to prevent the plugin from processing when I try to quote the code here. Introducing spaces causes the gallery plugin to pass over the text.