Early 2006, a cool guy named Lokesh Dhakar introduced Lightbox, a unobtrusive script used to display large images using modal dialogs over a black faded background. A great script, really. Since, every once in a while, someone comes up with their own take at this concept, using this or that javascript library (jQuery, Prototype, Mootools, YUI, you name it) and supporting various types of objects: images, flash objects, videos, inline HTML content, iframes, content fetched via an Ajax call, etc…
Recently, thinking about ditching Prototype here on this blog, I wondered if there was any cool Lightbox clone for jQuery. Man, there are dozens of them. How am I supposed to chose the one that will suit my needs? I started to write down a few URLs and comments, then it occurred to me that I could make something cooler. A few coding later, here is the Lightbox Clones Matrix!
I’ve listed more than 30 scripts, detailing for each one:
- Its javascript size (not considering CSS, images or anything else)
- The library needed, if any, mentionning its javascript size. I opted to compare uncompressed javascript file sizes, as it (sorts of) reflects the complexity and/or power of the library, regardless of how packed/minified/obfuscated it usually ships.
- The total javascript size. This data won’t interest someone already using a javascript library on their site, obviously.
- Image support
- The ability to group images into a single collection, allowing for easily browsing through images within the same overlay
- Any other common object supported: inline content (ie content already existing in the page, but typically hidden), iframe, content fetched by an Ajax call, video, Flash.
To make things cuter and quicker to read, everything is summarized by a row of pretty icons (mostly coming from the wonderful Silk set)
Of course, what would be the point of it if you couldn’t quickly restrict you search to a few criteria? There’s a handy filter set to make your selection easier. All the options are logical “OR”, ie selecting several features will list scripts with at least one of them. Note that you can shrink the filter box if you don’t need it.
Overall I had some fun making the Lightbox Clones Matrix. I hope it will be actually of any use to someone. Bookmark it, just in case you need it in the future! ;)
Pages: « 1 [2] 3 » Show All
said, on 17/May/08 at 2:42 pm # :
The combination of Mootools and Slimbox only needs 37 kb in total.
It’s not the way mootools should be presented. It’s a modular system and you should note this in this list, rather you like it or not
said, on 17/May/08 at 2:54 pm # :
(I missed to mention, that a comparison of non packed libraries is … well, very theoretical)
commented, on 21/May/08 at 3:27 pm # :
Hello Ozh,
maybe: http://www.leigeber.com/2008/05/ajax-image-gallery-slideshow/
A idea for you matrix, maybe.
With best gedards.
Frank
commented, on 22/May/08 at 12:48 am # :
It would be nice to note which of the main browsers are supported. I’m on Opera 9.27, and running the demos for LightWindow and ShadowBox to watch the YouTube embedded video starts a d/l of I.swf (or l.swf) each time (in both demos), then nothing happens. No such issue on FF, though.
Otherwise, great job summarizing their great work, thanks.
trackback on 22/May/08 at 7:01 am # :
Lightbox Scripts Comparison Matrix…
There are many Lightbox-type scripts which are built with different JavaScript frameworks and have different features.
planetOzh has created a nice comparison matrix for these Lightbox clones. You can sort the scripts and see their features easily.
Co…
said, on 23/May/08 at 12:49 am # :
There is also Clearbox. http://www.clearbox.hu/
I have used it in my site http://www.fototoscana.it
thanks a lot for your site!
wrote, on 23/May/08 at 10:22 am # :
michele » I’d rather stick with stuff that I understand better, like English ;)
wrote, on 24/May/08 at 6:09 pm # :
Floatbox which is derived from Lytebox is missing in the matrix. :)
wrote, on 25/May/08 at 9:25 pm # :
Funbug » Thanks, I’ve added it to the list
replied, on 26/May/08 at 4:18 pm # :
Great comparison, but I’m missing the “can prefetch the next image” in the filter..
said, on 26/May/08 at 10:26 pm # :
I think one of the best ones is missing: EnlargeIt! has AJAX support, different animations, lots of stuff to configure, it’s absolutely free of charge and it’s less than 13 Kbytes. http://enlargeit.timos-welt.de
best regards
Timo
thought, on 26/May/08 at 11:16 pm # :
Timo » Thanks, added!
wrote, on 28/May/08 at 6:45 pm # :
Hi Ozh,
two small mistakes: Enlargeit is 14 Kbyte in size, not 30 (the source version is only part of the archive to fulfill the GPL requirements). And another one: Just released 0.96 that can group pictures to sets via class attribute and navigate between them with buttons.
Thanks for your good work!
best regards
Timo
wrote, on 28/May/08 at 9:20 pm # :
Timo » I elected to compare uncompressed sizes.
said, on 29/May/08 at 7:47 am # :
Hi Ozh,
oh I’m sorry, I wasn’t aware. That’s of course fair, though I can’t imagine anyone using the uncompressed version of any of the scripts as long as the author offers a packed version. Especially the framework based products dramatically shrink if all components are compressed. BTW: Highslide is 16.9-69.2, the 8.5 is the packed version. This one was what made me think you compared smallest possible sizes.
Keep on the good work, your comparison is the most complete I’ve ever seen!
best regards
Timo
wrote, on 12/Jun/08 at 12:48 pm # :
Good work Ozh!
can i suggest that you add http://www.weebbox.com/
…ohhh look it’s got a slideshow!
much love,
definitely not weeb from weebbox
replied, on 12/Jun/08 at 9:53 pm # :
definitely not weeb from weebbox » Added!
said, on 17/Jun/08 at 12:00 am # :
Great compilation. I didn’t see clearbox on there, however:
http://clearbox.hu
His innovation is the thumbnail browser within the lightbox itself. It’s too bad his code is obfuscated, because while the functionality is great, the layout and lack of keyboard navigation are unattractive.
wrote, on 17/Jun/08 at 7:08 am # :
guns » I saw this script, but didn’t include it because it was not translated in english so I wasn’t sure of the features etc…
pingback on 19/Jun/08 at 10:13 pm # :
[...] gibt es schon so viele verschiedene Scripte, dass kaum einer noch den überblick hat.Daher hat planetozh.com eine Liste herausgebracht, die über 30 solcher Scripte auflistet und vergleicht. Etwa welche [...]