I’ve integrated Lightbox 2 on my blogs but noted one problem: The wordpress plugins for Lightbox 2 do not support auto-resizing. I’ve put together some scripts which each solve parts of the problem. So I got Lightbox 2 in Wordpress with auto-resize.

There are different versions of Lightbox. Some under different names. Their main functionality is: When you click on a thumbnail of an image the screen is darkened and the image is displayed in a bigger size. Often with a broad white border. Usually you are able to navigate between the different images on a page.

The problem is that usually the big image is displayed with a fixed size. So the images should have sizes that fit also smaller monitors. Unless Lightbox would allow automatic resizing dependent on the screen size. Unfortunately there are not many scripts which support this feature. At least, I have not found any for wordpress.

Here you can see how it could work:

Wordpress Lightbox 2 Plugin

Lightbox 2 is a script written by Lokesh Dhakar which can be added to existing web pages to provide the Lightbox functionality to the images on the page. The script works independently from wordpress.

In the Wordpress plugin directory I found two Lightbox 2 plugins. I first tried the plugin Lightbox 2 version 2.8.2 written by Ruppert Morris as it had the better rating.

When I was looking for auto-resizing functionality for Lightbox 2 I found the blog post “Latest Lightbox V2 with automatic resizing” written by Fabian Lange. He added auto-resizing to Lightbox V2.04 without changing much of the original code.

When I looked into the Lightbox 2 plugin of Ruppert Morris I saw that he had extensively changed the original Lightbox 2 code. So I tried the second Lightbox 2 plugin.

This is the Lightbox 2 Plugin, Version 2.0.2 provided by Giuseppe Argento. It is built on the original Lightbox 2.0.4 with just some minimal changes. I did a three way comparison of this plugin, the original Lightbox 2 code and the code with the auto-resize functionality from Fabian Lange. So I could integrate the auto resizing functionality in the wordpress plugin.

I integrated the following features added by Fabian Lange (see Blog):

• Auto-Resize
• Opera 9 Bugfix
• Bugfix: If the next image has no caption/description.

Further more I added these features:

• The Lightbox 2 script uses a fixed top margin. I’m now calculating the top margin such that it should be vertically centered. The size of the bottom border with the image description is included in the picture height (fixed value changeable in the head of the script) .
• As I had problems with the dark transparent background I changed it to “position:fixed;”. One problem exists: When the window size is increased the dark background only appears with some delay.
• In the resize code an event handler tracks the resize of the browser window. I had the problem that this handler was not removed when the lightbox was closed. So the image appeared again when the browser window has been resized. I changed the code that the event handler is removed when the lightbox is closed.

One minor cosmetic problem still exists: As the images are also adjusted vertically they do not move to their top position slowly animated but jerky.

Installation of Lightbox 2 with Auto-Resizing in Wordpress

1. Download and install the Wordpress plugin written by Giuseppe Argento: Lightbox 2 v2.0.2.
2. Download lightbox.css. Copy to (replace file)  wp-content\plugins\lightbox-2-wordpress-plugin\lightbox\css\ .
3. Download lightbox.js. Copy to (replace file) wp-content\plugins\lightbox-2-wordpress-plugin\lightbox\js\.

Credits

• Lokesh Dhakar for Lightbox 2.
• Giuseppe Argento for the Wordpress-Plugin.
• Fabian Lange for the auto-resizing functionality.

Some more Tips

• Enable “Auto-Lightbox” in the settings of the Lightbox 2 Plugin.
• When adding a new image to a post the field “Link URL” must be filled with the URL to the image. If this is not filled, use the buttons “File URL” (when adding a new image) or “Link to Image” (when editing) to add the URL.
• Vince has posted on the German version of this post that the Lightbox 2 plugin does not automatically work with old posts. You can find a fix here: http://wordpress.org/support/topic/227077
• The auto resizing Lightbox worked for me in the following Wordpress versions: 2.7.x, 2.8, 2.8.1.