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! ;)
Shorter URL
Want to share or tweet this post? Please use this short URL: http://ozh.in/hd
thought, on 03/Apr/08 at 11:44 pm # :
and you dont even tell us which one you finally chosed !
n00b
replied, on 04/Apr/08 at 12:07 am # :
armouf » indeed. FancyBox has my vote as of now :)
thought, on 04/Apr/08 at 1:38 pm # :
WOW!
Merci beaucoup, bonhomme :-)
Félicitations
commented, on 14/Apr/08 at 5:53 pm # :
Excellent resource thanks a lot mate.
replied, on 15/Apr/08 at 5:17 am # :
great! this is what i looking for. thanks!
pingback on 21/Apr/08 at 3:38 pm # :
[...] ?planetOzh???The Lightbox Clones Matrix???????????Lightbox??????????????????????? [...]
wrote, on 21/Apr/08 at 11:29 pm # :
Hey buddy.
Long time no see.
Nice stuff you collected.
Btw if you want, there is also a nice one that is not on the list:
http://glassbox-js.com/
SEYA
wrote, on 21/Apr/08 at 11:50 pm # :
Kaiserlino » yeah I did see this script. I just could figure honestly what the f** it was for.
wrote, on 23/Apr/08 at 3:30 pm # :
Hi! And now add this one:
http://reghellin.com/milkbox/
A mootools 1.2 version, with some differences/improvements
:) Bye1
thought, on 23/Apr/08 at 4:24 pm # :
Luca » Added, thanks!
said, on 23/Apr/08 at 4:28 pm # :
Nice list. thanks!
One small thing you forgot is lightview supports video formats, avi mpg etc.
wrote, on 25/Apr/08 at 10:32 am # :
Hi Ozh! Thanks! I've got a couple of things to say about mootools-related clones:
- I think you should write the correct version of mootools, since they're not really compatible. One could say hey, this clone is really good, I'll put in my pages! And then realize that in fact he can't. For example: litebox is for moo.fx, not for mootools. And Slimbox is for mootools 1.11, but it has problems working with mootools 1.2, even if you include compatibility with previous versions. Not to mention, Milkbox is just for mootools 1.2, and it won't work with previous versions.
- The weight. I just checked the file weight of milkbox: the mootools distributed with milkbox is about 55 Kb, not 98. And the total javascript size (milkbox+mootools) is about 74.4 Kb, not 111. The very total, with css and button images, is about 87,8 Kb. :P
So, these are not REALLY important things, but they sure would improve the matrix, so if you maybe want and got the time… ;)
Thank you!!!
Luca
thought, on 25/Apr/08 at 10:42 am # :
Luca » You pretty much pinpoint the #1 thing I dont like with mootools stuff: inconsistencies between version support and size. That's why I elected to only report the latest size with all components :)
pingback on 26/Apr/08 at 1:22 am # :
[...] ???The Lightbox Clones Matrix: Compare 30+ Lightbox Scripts ???30+Lightbox??????????? [...]
said, on 28/Apr/08 at 1:06 pm # :
Actually I`ve just updated FancyBox, I hope you`ll like it :)
thought, on 30/Apr/08 at 6:05 am # :
Wow… what a great resource!
There's a great Mootools lightbox that's not on the list: http://digitarald.de/project/squeezebox/
Thanks for providing this service to the web development community! – Erik
replied, on 06/May/08 at 1:36 pm # :
Really nice overview of what is available! Of course there is an infinite number of features that could potentially be nice to have in the matrix: Does it have keyboard navigation? How does it handle images to large to fit the window? Does it do any preloading? Etc.
I think you need to redo the filtering.
For instance, if I don't care if my lightbox clone does flash, I uncheck the flash select – and suddenly all the clones which can do flash are removed – even the ones that can show images, which I am interested in.
I don't think my criteria when choosing a lightbox would be "I certainly don't want a lightbox which can show flash" :-)
Wouldn't it be better to have all the "feature selects" be initially unchecked, meaning "I don't care about this feature" and then AND'ing the selected features, meaning that the lightbox has to have all the selected features?
At the same you might be interested in lightboxes built on one of several different libraries. So the "library selects", should be initially checked and then showing only the lightboxes that match either of the selected libraries.
I have taken the liberty to rewrite your get_checks() function to reflect the proposed changes. Beyond that, you just have to remove the initial checkmarks from the "feature selects" :-)
said, on 06/May/08 at 6:34 pm # :
Nicholas Oxhøj » This is much much much better than mine. Thanks a million! :)
commented, on 08/May/08 at 3:44 pm # :
Awesome collection, that what I have been looking for.
I wish there were a comments field on the matrix where we can see your comments on each of the scripts.
pingback on 16/May/08 at 10:58 pm # :
[...] zugehörigen Beitrag erklärt Ozh Hintergründe und Funktion, wobei die Matrix selbsterklärend ist. Ebenso [...]
thought, 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
thought, on 17/May/08 at 2:54 pm # :
(I missed to mention, that a comparison of non packed libraries is … well, very theoretical)
said, 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
wrote, 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…
thought, 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!
said, on 23/May/08 at 10:22 am # :
michele » I'd rather stick with stuff that I understand better, like English ;)
thought, on 24/May/08 at 6:09 pm # :
Floatbox which is derived from Lytebox is missing in the matrix. :)
commented, on 25/May/08 at 9:25 pm # :
Funbug » Thanks, I've added it to the list
thought, on 26/May/08 at 4:18 pm # :
Great comparison, but I'm missing the "can prefetch the next image" in the filter..
replied, 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.
thought, 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
thought, 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
thought, on 12/Jun/08 at 9:53 pm # :
definitely not weeb from weebbox » Added!
wrote, 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 [...]
thought, on 03/Jul/08 at 9:00 am # :
Hi Ozh,
Great list. You've doubled the size of floatbox. Probably because there's two js files included. Only one or the other of them is used depending on whether you want full screen or iframe-constrained results. Floatbox currently sits at 43k uncompressed (no libraries). Cheers…
wrote, on 03/Jul/08 at 9:23 am # :
byronious » UNcompressed sizes are compared
commented, on 03/Jul/08 at 4:52 pm # :
Ozh,
Of course UNcompressed sizes are compared. That's why I said Floatbox is "43k uncompressed". In fact, there is no compressed version of floatbox. I don't know where you're getting the idea I'm reporting compressed size.
pingback on 03/Jul/08 at 8:15 pm # :
[...] gibi özelliklere göre s?ralama yap?labiliyor.Buradan lightbox klon listesine ula?abilir buradan ise yap?mc?n?n bu proje ile ilgili verdi?i bilgilere [...]
wrote, on 03/Jul/08 at 8:28 pm # :
byronious » I just assumed you needed the two .js files included in your download archive
pingback on 11/Jul/08 at 10:07 am # :
[...] http://planetozh.com/blog/2008/04/the-lightbox-clone-matrix-compare-30-lightbox-scripts/ [...]
said, on 13/Aug/08 at 2:31 am # :
Saw an interesting jquery plugin that is not on your list yet…
Projector
Thanks for keeping up the billboard for my one stop script shopping :)
thought, on 14/Aug/08 at 9:18 pm # :
Hi Ohz,
great work! Maybe another feature to include in your matrix and filter would be, if the clone has animations, or doesn't have them, or if they can be toggled. (I don't know if other people care so much as I do, but I hate animations done in JS because they eat up my CPU.)
said, on 30/Aug/08 at 12:42 am # :
Check this:
http://www.coders.me/ejemplos/sexy-lightbox
I'ts more sexy !
commented, on 31/Aug/08 at 4:26 pm # :
Eduardo » Added, but an English page would be really cool
wrote, on 11/Sep/08 at 12:34 am # :
Hi Ozh,
A new major version release of floatbox. Now does direct AJAX content, inline divs, flash, quicktime, youtube, yahoo video, etc., along with the usual image, gallery, slideshow and iframe suspects. A number of other useful features including international language localization.
Code size = 71.3 KB (33.8 compressed, 105 fully commented).
Thanks for keeping your list current.
thought, on 11/Sep/08 at 12:43 am # :
byronius » Thanks for letting me know, I've updated the list
commented, on 25/Sep/08 at 5:40 pm # :
nyroModal can handle Flash.
commented, on 12/Nov/08 at 2:19 pm # :
Hi Ozh, i just finished my first plugin, take a look.
http://www.pirolab.it/pirobox/
Regards
Diego Valobra
wrote, on 21/Nov/08 at 3:28 pm # :
Hi Ozh, have you seen my plugin??
Regards
Diego Valobra
replied, on 01/Dec/08 at 3:58 pm # :
Great tool, but I have found that my favorite ligthbox script called clearbox is missing. Check it at http://www.clearbox.hu/EN/
said, on 10/Dec/08 at 10:58 pm # :
Hey I just made a really light weight light box script called "lighter box" it is 7.9kb (total with all the files)
(it doesn't require a library!)
check it out and let me know what you think
http://www.tdesignonline.com/lighter-box
Blessings,
Richard Lee
thought, on 15/Dec/08 at 2:15 am # :
I updated my lighter box to lighter box2 to incorporate some new features such as next and previous image, a transition effect, and a description display you can check it out here thanks for making this list its really cool to see other peoples light boxes!
http://www.tdesignonline.com/lighter-box-2
Blessings,
Richard Lee
replied, on 19/Dec/08 at 10:25 pm # :
Hello,
EnlargeIt! finally made it to version 1.1. It can now also enlarge flash files, FLV videos, YouTube movies, DivX movies or iframes. Other new features: Navigation via arrow keys or mouse wheel, hidden call of a counter URL, border textures, smooth darkening. The script is now modular from 11 to 49 Kbyte. Integration has become easier than before. http://enlargeit.timos-welt.de
regards
Timo
wrote, on 08/Feb/09 at 5:14 pm # :
So, hey, I've made one of these fancy image zoom scripts myself. I personally think it is pretty slick.
It can be found at http://am.aurlien.net/projects/arnebox/
replied, on 25/Feb/09 at 6:27 pm # :
Maybe you could add ImageZoom to the list?
http://bertramakers.com/moolabs/imagezoom.php
Thanks!
wrote, on 14/Mar/09 at 12:08 am # :
thanks for this list!
maybe you would like to add fancybox http://fancy.klade.lv/home
replied, on 29/Apr/09 at 6:32 am # :
Could you add ColorBox to this list? http://colorpowered.com/colorbox/
commented, on 14/May/09 at 2:28 am # :
This matrix is great and definitely useful! I'd be happy to find any lightbox that can play mp4 files? If anyone knows of any please let me know. :)
http://twitter.com/adelineyaw
replied, on 24/May/09 at 8:16 am # :
SexyLightbox 2 rlz!
http://www.coders.me/lang/en/web-html-js-css/javascript/sexy-lightbox-2
Please update your matrix, because this new version can display inline elements, flash, iframes, and images.
thought, on 24/May/09 at 10:28 pm # :
Maybe you could add Anabox to the list: http://ix.residuum.org/anabox.html
said, on 30/May/09 at 12:18 am # :
Has anyone developed a combination: photo display with a scrollable text block stuck on the side?
commented, on 31/May/09 at 11:40 am # :
Could you add SexyLightbox2 to the list?
jQuery version:
http://www.coders.me/ejemplos/sexy-lightbox-2/jQuery/
mooTools version:
http://www.coders.me/ejemplos/sexy-lightbox-2/
Can display Images.
Can display Gallery.
Can display inline elements.
Can display iframes.
Can fetch content via AJAX.
Can display flash.
replied, on 18/Jun/09 at 9:41 pm # :
I would love to be able to sort these by which ones are free for commercial use. Keep up the good work on this great resource!
wrote, on 05/Jul/09 at 12:14 am # :
Just wondering if you could add Picbox?
http://bunnyfire.co.uk/projects/picbox/
Think the picasa image viewer but in a browser.. :)
replied, on 28/Jul/09 at 5:21 am # :
Could you add ColorBox?
http://colorpowered.com/colorbox/
wrote, on 13/Aug/09 at 12:15 am # :
I was wondering when the last time this matrix was updated. Reason I ask is because I know a lot of the scripts have functionality like iframes which are not labeled in your matrix. For instance, pretty box, does not have iframes included in it's features.
Thanks!
replied, on 13/Aug/09 at 8:40 am # :
Ryan Huber » I'm obviously not reviewing every script regularly to check for updates.
wrote, on 23/Aug/09 at 11:09 am # :
Guess you'd like to add this one here, as it supports PDF files, flv, swf, images and html: http://www.artviper.net/bumpbox.php
commented, on 23/Aug/09 at 2:24 pm # :
Frank » It's added. Thanks for your interest!
commented, on 23/Aug/09 at 4:11 pm # :
Hi Ozh,
thanks a lot! Keep up the good work!
cheers
Frank
wrote, on 22/Sep/09 at 12:25 pm # :
Could you add preloading and aut-resize to the available features ?
commented, on 22/Sep/09 at 1:46 pm # :
Jean » No. Simply don't want to review all the libraries again :)
replied, on 15/Oct/09 at 10:08 am # :
Hi, there!
Could you also add TopUp?
http://gettopup.com/
It's a Lightbox-like library. You can either host the JS and image files yourself or just use one(!) Javascript include, nothing more!
It uses sprites to reduce the amount of image requests. It has a Apple-like Dashboard and Quicklook layout. Also, it offers you to keep your HTML code clean using CSS selectors.
replied, on 16/Oct/09 at 9:22 am # :
Paul Engel » Added. Thanks for your interest
commented, on 16/Oct/09 at 3:59 pm # :
Hi Ozh,
I would like to recommend 2 Lightbox clones for you:
- TinyBox JavaScript Popup Box
- Clearbox 3
It is a very useful list. Good work!
said, on 22/Oct/09 at 7:15 pm # :
The one that I would have to recommend is Simple Viewer. You can find it here
http://topclonescripts.info/?p=169
I use this on a bunch of sites, and their own CMS which is available as well. Cant recommend it highly enough, and it also looks amazing!
replied, on 22/Oct/09 at 8:27 pm # :
Ryan » totally off topic. This is Flash. This is obstrusive.
wrote, on 01/Nov/09 at 2:16 pm # :
Hi Ozh,
bumpbox has been updated – using now some CSS3 styles, has a new media detection routine as well plays MP3 files now – seems you need to update your legend a bit to show this ^^
all the best
Frank
said, on 11/Nov/09 at 7:27 pm # :
Hi Hoz, i just released the new version of pirobox,
http://www.pirolab.it/pirobox/
Can you update the size of the script (11KB full version 8KB min version), it works with the latest jquery 1.3.2 that is 56KB so the total size goes from 64KB to 67KB.
TNX aloT and regards,Diego
thought, on 20/Nov/09 at 1:37 am # :
Hi great list! Could you add my lightbox clone to your list? CeeBox. It has some functionality that others don't and I'd like to get it out there so others can use it if they need to.
Name: CeeBox
Framework: jQuery
Size mimimized (but not gziped): 12KB
Size unminimized (with all comments): 28KB
Can display images: Yes
Can group images into sets: Yes
Can display inline elements: Yes
Can display iframes: Yes
Can fetch content via Ajax: Yes
Can display Flash: Yes
Can display various Video objects: Yes
Other functionality: Can auto embed videos from youtube,facebook,metacafe, cnn, and a number of other video sites. Can display html and video in grouped gallery format along with images.
Thanks!
-Colin
said, on 20/Nov/09 at 7:58 pm # :
Colin » Done. Thanks for your interest.
commented, on 03/Jan/10 at 7:19 pm # :
A very useful list indeed. Thabnk you very much.
commented, on 18/Jan/10 at 8:23 pm # :
Here is another one:
http://www.plashenkov.com/2010/01/lightweight-image-viewer-for-your-site.html
Please include it to your matrix if possible. Thank you!
commented, on 24/Jan/10 at 4:53 pm # :
G'day all,
Great to see the web world so robust.
Here is the $64 question – does ANY of these scripts work before the page has fully loaded?
Cheers
thought, on 23/Feb/10 at 3:17 pm # :
Here's another lightbox script for you: MooDialog
http://mootools.net/forge/p/moodialog
commented, on 06/May/10 at 7:45 pm # :
There is another Lightbox-Clone called Quickbox, which is based on Slimbox an uses MooTools:
http://andrewplummer.com/code/quickbox/
As the main advantage over Slimbox, this script is a MooTools class and it's much easier to extend.
commented, on 22/May/10 at 8:38 pm # :
http://www.clearbox.hu/index_en.html
Clearbox is a professional image and content viewer overlay window. Images below are speaking for themself, where you can see some examples about using the script: image galleries and many type of contents including Flash, Quicktime, Windows Media formats, HTML, inner content, etc.
wrote, on 22/Jun/10 at 3:34 pm # :
Great list. Wish you could have put a tickbox column in however, to show which clones allow for image resizing within the browser window. I know prettyphoto does this but am not aware of any others -and for an image viewer this seems quite an important option to provide.
Thanks tho – otherwise invaluable!
commented, on 06/Jul/10 at 9:11 pm # :
As of today, it seems the Weebbox site is not longer active. In addition, the script itself was acting up in Chrome although oddly enough, working well in FFx and even IE8.
wrote, on 16/Mar/11 at 10:34 pm # :
Wrote another one with browser back button support: http://mylittlehomepage.net/en/miscellaneous/mylightbox
said, on 11/Apr/11 at 1:49 pm # :
We at Ceramedia created our own version of the Lightbox and called it Cerabox.
It's build on MooTools 1.3, is 20KB in size and has all the features you are able to filter on at The Lightbox Clones Matrix.
We would love to be included on the Clones Matrix and hope you like our version.
More information available at http://cerabox.net
The new website will be online soon.
wrote, on 11/Apr/11 at 9:09 pm # :
Ceramedia » Added! Thanks for your interest
said, on 27/Apr/11 at 2:02 pm # :
With our latest release of CeraBox it's also possible to display "Inline elements".
Also the new version of the website is live with examples and options.
said, on 29/Jun/11 at 2:07 pm # :
First of all, thanks for this great tool.
I'm the creator of nyroModal, and with the version 2, nyroModal can display flash and various video elements.
Actually, it uses embed.ly API, so it supports a LOTS of video and image websites…
replied, on 02/Feb/12 at 2:36 pm # :
Ok, do ANY of these work with image rollovers (done in jquery, css or javascript?)
All the ones i try fail when the thumbnail is a rollover.
Please help!!
said, on 20/Mar/12 at 2:22 pm # :
Hi Ozh,
Any chance of updating the home page link for Floatbox? It's changed to http://floatboxjs.com/
Thanks!
commented, on 03/May/12 at 12:43 am # :
please add licensing filter.
wrote, on 18/Nov/12 at 1:58 pm # :
I found a new jquery lightbox plugin. It's called Lightcase.
If someone is searching for a lite and well looked one.
A lot of content types are supported.