Which is the best lightbox clone for jQuery ?

admin — Fri, 02 Jan 2009 22:08:54 +0000

Lightbox is a script made by Lokesh Dhakar which is one of the most popular way for showing images or image galleries. The original lightbox script was written using prototype and script aculous javascript libraries. So the main problem is, we need to include these two libraries (almost 100 KB) again even if we’re using jQuery. Certainly, this is not the best way. Thank fully, some programmers realized the situation and made the clones using jQuery. The effects and functionality are almost similar to lightbox but the only difference is, it uses jQuery library instead of prototype. The size of a compressed jQuery library is only 25KB.

Here, I am reviewing three of the lightbox clones.

jQuery Lightbox Plugin (balupton edition)

Specifications

Dependencies	jQuery
Size	Less than 13KB (compressed)
Grouping of Images	Supported
Keyboard Navigation	Supported (Arrow keys & Esc)
Transition Effects	Yes
Description for images	Supported
Image Resize	Yes, automatically resizes to fit in browser
Description for images	Supported
Supported Browsers	Firefox 2+3, IE6+7, Safari 3, Opera 9.5
Restrictions	No (GPL license)
Demo	Open \| Open in new window
Info & Download	Open in new window

This plugin is easy to use and supports automatic resizing of images(But no option to show unresized image). It is slightly heavier than the other two.

jQuery Lightbox by Leandro Vieira Pinho

Dependencies	jQuery
Size	Less than 7KB (compressed)
Grouping of Images	Supported
Keyboard Navigation	Supported (Arrow keys & Esc)
Transition Effects	Yes
Description for images	Supported
Image Resize	No
Description for images	Supported
Supported Browsers	Firefox 2+3, IE6+7, Safari 3, Opera 9.5
Restrictions	No
Demo & Download	Open \| Open in new window

One problem I noticed with this script is, the images are not centered correctly in some cases (Try with an image that almost fits the browser client area). Also it doesnot support image resize. So if a large image is used, one needs to scroll the window to see the whole image. The good side is, it is very light and configurable. Unlike the others, the lightbox should be invoked for the required elements. So you need to use a simple jquery statement to invoke the lightbox (Very simple and fully documented)

Pretty Photo by Stephane Caron

Dependencies	jQuery
Size	Less than 9KB (compressed)
Grouping of Images	Supported
Keyboard Navigation	Supported (Arrow keys & Esc)
Transition Effects	Yes
Description for images	Supported
Image Resize	Yes
Flash Support	Yes
Supported Browsers	Firefox 2+3, IE6+7, Safari 3, Opera 9.5
Restrictions	No
Demo & Download	Open \| Open in new window

It looks very good. The animations, centering and resizing of images, are perfectly done. The default styles are also fine. One thing I like is, it automatically resizes the image and an icon is shown in the image to expand it to original size (Very good feature, just like Highslide). Also, it is always centered even if the window is scrolled. But here I suggest to use the jQuery easing plugin for better effects.

Conclusion

As we can see, Pretty Photo is the best considering the features. It also supports flash. The default styles are also nice. So in my opinion, it is the best lightbox clone for jQuery. What do you think? Please let me know your thoughts.

Three lightbox clones for Mootools Just like jQuery, Mootools also has some nice lightbox clones...
Image Flow 0.9 Image flow is inspired by Apple’s cover flow. The...
10 jQuery plugins for showing image gallery An image gallery is part of the modern web 2.0...

Related posts brought to you by Yet Another Related Posts Plugin.

Cool Javascripts » lightbox clones

Which is the best lightbox clone for jQuery ?

jQuery Lightbox Plugin (balupton edition)

jQuery Lightbox by Leandro Vieira Pinho

Pretty Photo by Stephane Caron