Lightbox JS

Tools, Wordpress

One problem that I always faced while posting articles was with embedding images. SnagIt did ease this a little bit, but I still had the problem with the sizing of the images. I had to accommodate the image within the width set by the theme . If the image size exceeds this width, I have to go for a minimized version of the same.

One solution is to make this “minimized” image a hyperlink to the bigger/actual image. The problem is that the user is moved away from the current page and he has to again press the “back” button to go back to the article.

Lightbox JS by Lokesh Dhakar, is a simple, unobtrusive script which can be used to overlay images on the current page. It is pretty easy to setup and works on all browsers. (But I did have a problem with IE7 “Beta”)

You can download the latest version i.e. Lightbox JS 2.0 at this link. Lightbox v2.0 uses the Prototype Framework and Scriptaculous Effects Library. Here are some images to see how it works.

(Click on the image to see Lightbox in action. For the image set, hover over the image and press the “Next” button)

Single Image

Image Set

Vista: image 1 0f 4 thumb
Vista: image 2 0f 4 thumb
Vista Sidebar: image 3 0f 4 thumb
Vista: New kids on the block image 4 0f 4 thumb

If you are using WordPress, Safirul Alredha has created a cute little plugin to ease the LightBox integration. The plugin can be found at this link.

Tags: , , , ,

Comments on this entry are closed.

  • Vasuki Jul 7, 2006 Link

    The first time I tried to open this is Opera, it prompted with the “Open or save” dialog box. After that, it worked fine! It just opened as in IE. I am particularly impressed with the image set. I would have loved to have a “Prev” link along with the “Next” link that it has. That could have been used as a slide show.

  • Venu Jul 7, 2006 Link

    There is a “Prev” link also. Probably you also overlooked (I also didn’t find it intially). Hover on the left side of the image and you have the “Prev” link also 🙂

  • Raghavendra Sep 6, 2007 Link

    I am new to lighbox. I have installed in my computer.When I made a thumbnail gallery lightbox when opened will not display caption which I have incorporated in title. Could you pl help me how I can do this.