Use snazzy image loading effects in your blog with Lightbox JS and a Zooomr account (quick, they’re still offering free pro accounts to bloggers, get yours).

Lightbox JS allows you to load larger versions of images on the same page via a cool overlay window. The rest of the page is dimmed with a grayish transparency. To preview the effect, click on the thumbnail in this blog post after the entire page has finished loading. For the effect to work, the entire page must finish loading, otherwise you’d just be taken to a new page that contains the larger image.

You can either manually use the script in your website or blog or use a plugin, there’s one for WordPress. I chose to use the WordPress plugin because apart from configuring Lightbox JS to work with your blog, it also places a Lightbox quicktag in your post editing screen to simplify the markup of photos to use the script. The plugin, however, doesn’t seem to work with the K2 WordPress theme although I remember reading somewhere a workaround on this.

What you need

1. A blog hosted on your own server. You can’t do this with the hosted WordPress service at wordpress.com or other free blog services. Most of these services do not allow you to upload plugins or files.

2. The Lightbox JS package or the WordPress plugin. I suggest you chose the WordPress plugin. The plugin works if you do not enable the WYSIWYG visual post editor in WordPress. I don’t know if there is already a solution to make the plugin work with the WYSIWYG editor.

3. A Zooomr account. This isn’t really a requirement but it simplifies things. Zooomr resizes photos that you upload so it makes it easier for you to generate the two image sizes you will be using for the effect. You can use Lightbox JS with images hosted in your own server but you’d have to resize it to generate a thumbnail. This is okay if you only want to use Lightbox JS for one or two images in your post but if you use the effect for several images, it can be a bit tiring.

You can also use this with a Flickr account but I chose Zooomr because Flickr specifies in its terms of usage that you should link your image to its Flickr photo page. Zooomr, on the other hand, doesn’t contain this provision (yet). I posted a question on this in the Zooomr blog but I didn’t get an answer. The Zooomr guys were still too busy dealing with the launch of version 2.0 of their service.

What I did with Flickr is that I still linked the image to its larger version but provided a link to the Flickr photo page in the caption in the photo overlay. I’m still doing that with the Zooomr photos, in the hope that if the practice is against its terms of use, they’d just allow it because there’s a link to the photo page.

How to use Lightbox

1. Install the plugin or configure the script.

2. After uploading the photo that you want to use, click on All Sizes. Choose the size of the image you want to load in the popup window. I typically use Medium or the size closest to the 500-pixel width range (Medium). If you did not resize the photo that you uploaded, the original width may exceed 1000 pixels and the popup window would cover everything. If you choose sizes in this range, the close button in the popup window will not be immediately visible on the screen, you’d have to scroll down to the bottom of the window to use it.

3. Get the URL of the two images you’d be using for the effect. Take note of the dimension of the smaller image you’d be using.

4. Get the URL of the photo page. You need this for the link in your caption. The URL should be entered in its HTML entity equivalent. Just copy the line below and replace URLHERE with the URL of the photo page:

<a href="URLHERE">View in Zooomr</a>

5. If you’re using the WordPress plugin, arrange your data for easy cut and paste entry when using the Lightbox quicktag:

URL OF LARGE IMAGE
Caption plus link to the Zooomr photo page:
URL OF THUMBNAIL
WIDTH OF IMAGE
HEIGHT OF IMAGE
IMAGE ALT ATTRIBUTE

If you did not install the WordPress plugin, use the format below:
<a href="URLOFLARGEIMAGE" rel="lightbox" title="Caption and Zooomr photo page link"><img src="URLOFTHUMBNAIL" width="WIDTH" height="HEIGHT" alt="IMAGE ALT ATTRIBUTE" /></a>

To make text wrap around the image, just include align="left" or align="right" in the code. You can insert it after the height part of the code. If you have a photoset, just use rel="lightbox[photoset name]" to get the Next and Previous link in the overlay window.