Which is the best lightbox clone for jQuery ?

January 2, 2009 by admin · 10 Comments
Filed under: Galleries, jQuery 

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.

Related posts:

  1. Three lightbox clones for Mootools
  2. Image Flow 0.9
  3. 10 jQuery plugins for showing image gallery
  4. Improved lava lamp effect for jQuery and Mootools
  5. 10 jQuery plugins for manipulating images

If you like this post, please share it so that others can also find this

Comments

10 Responses to “Which is the best lightbox clone for jQuery ?”
  1. Philipp Pfeiffenberger says:

    Thanks for the roundup! One correction: jQuery Lightbox by Leandro Vieira Pinho is actually restricted by a creative commons attribution no-derivative license. This legally prevents other users from modifying his software and using the modified software in their own projects :(

  2. Netflash says:

    How about ThickBox?

  3. admin says:

    Thickbox is a multipurpose modal script which can also show images. I didn’t consider it because it is not a lightbox clone. :)

  4. Jero Ahumada says:

    Thank you very much !

  5. kristarella says:

    Good review. I agree with your impressions and conclusions. Unfortunately I am having trouble with prettyPhoto with large images, when you have autoresizing on, but the image is larger than the viewport scrolling pretty much goes out the window. :( Other than that I love everything about it.

  6. DamsJqueries says:

    No Comment ! Just Use :

    http://colorpowered.com/colorbox

  7. Dan says:

    Pretty Photo is great. It’s definitely the cleanest and easiest to implement. However I wish someone would create some sort of Lightbox that has a design/layout API so it can be easily customizable. :-)

    Good article and thanks for posting it!

Trackbacks

Check out what others are saying about this post...
  1. [...] Which is the best lightbox clone for jQuery [...]

  2. [...] Which is the best lightbox clone for jQuery ? [...]

  3. [...] Which is the best lightbox clone for jQuery ? [...]



Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!