When I say Lightbox the word may conjour up many different images in your mind, possibly a white highly lit background to photograph objects on, perhaps even a literal box with a light in it like those pictured to the left (Gus Modern Lightbox), or as in the context of this post, a website feature that brings the chosen content front and center before the user.

Lightboxes are all the rage, and most web designers find some use for them on their websites so that they can make effective usage of available pixels, get clients to interact more effectively, or just plain make their site pop with some engaging effects. Whatever your usage may be, lightboxes are definitely a ubiquitous part of the Web 2.0 experience.

With that in mind there are also a myriad of different options out there, and it can be very difficult to find the right one that works just right for your situation. I have been very grateful for the hard work that was put in over at planetozh.com for their creation of the very useful Lightbox Clones Matrix, but unfortunately that resource has not kept up with all the changes that have happened in the Lightbox world, so I have taken it upon myself to find and review many of the Lightboxes that have been updated or newly released since the publishing of that great matrix.

So with that let’s get to it, so in no specific order, other then the order that I add them let’s take a look at the top 49+ Lightbox Clones and what makes them tick.

Top 10 jQuery Lightbox Clones

Top 10 MooTools Lightbox Clones

Top 10 Prototype Lightbox Clones

Top 10 Lightboxes that use their own Javascript Effects Library

Top 9 YUI (Yahoo) Lightbox Clones

One very interesting item that we discovered about the YUI Lightbox selection was that unlike the other javascript libraries, developers using the YUI library (for the most part) seem to be oblivious to the thought that other developers may have implemented lightbox functionality for the library already. This has led to an amazing lack of variety in the names of these different Lightbox Clones. So when you see several items with the same name…. it’s not my fault.

 1: Awesome Box

Awesome Box starts off our top 10 list, not only for it’s slick effects and overall finesse. But that this amazingly awesome little lightbox clone has a sweet name. Awesome Box leverages some unique effects to give a unique feel that other Lightbox Clones fail to achieve. So although it lacks the ability to display content other than images, Awesome Box makes images look really good.

Awesome Box supports:  Images, Image Sets

2: YUI Lightbox

YUI Lightbox is a simple image viewer script that sports some fairly standard functionality as far as lightboxes are concerned, one unique feature is that the lightbox will only close by clicking on the “close” icon in the upper right corner of the window.

YUI Lightbox Supports: Images

3: YUI Gallery Lightbox

YUI Gallery Lightbox, like the rest of the YUI lineup thus far in that it only supports images, but it does that very well. It is a complete port of the Lightbox 2 project to the YUI Library.

YUI Gallery Lightbox Supports: Images, Image Sets

4: PhotoViewer 

PhotoViewer, with its sweet effects and unique capability, offers some stiff competition to many of the other Lightbox Clones that pepper the interwebs. Some of the unique features that PhotoViewer has are the ability to load a Flickr RSS feed or run a timed slideshow.

PhotoViewer supports: Images, Image Sets

5: Lightbox with the help of YUI 2

Lightbox with the help of YUI 2 (LBWTHOY2) is a simple lightbox with some unique features and design. LBWTHOY2 has the ability (I assume given the image above) to load a Flickr feed (or single images), or to load AJAX Content and Inline Elements.

Slidewindow supports: Images, Inline Elements, AJAX Content

6: YUI Simple Lightbox

YUI Simple Lightbox appears to have borrowed some of it’s functionality and styling from YUI Lightbox (#2 above). Although it has been extended to allow for image sets, and does have a nice simple interface.

YUI Simple Lightbox supports:  Images, Image Sets

7: ShadowBox

ShadowBox is another unique lightbox, unlike most other lightboxes this script uses not just the YUI Library, but rather has the ability to run on many different javascript libraries, jQuery, Mootools, Prototype, and others. It also sports some great features and customizability.

ShadowBox supports: Images, Image Sets, Inline Elements, Iframes, AJAX Content, Flash, Video

8: Another YUI Lightbox 

Another YUI Lightbox, Yes I added “Another” to it’s name to hopefully distinguish it from all the other “YUI Lightbox’s”. Like most of the rest of the YUI crowd this Lightbox Clone only supports images, but it does offer a unique design over the other contenders.

Another YUI Lightbox supports:  Images

9: Lightbox for YUI 3

Lightbox for YUI 3 in true YUI from only supports images, and image sets. Nothing very different or standoutish here, just a good solid script

Lightbox for YUI 3 supports: Images, Image Sets

 You may ask, “Where is number 10″? Well, from our research this appears to be the sum of it. We would love to add a 10 to the list, so if you find one that we have missed please drop us a note and we will get it added to the list. 

Thanks for joining us for this rundown on Lightbox clones that use their own Javascript libraries. And a big thanks to planetozh.com for publishing The Lightbox Clones Matrix which helped considerably with our research on previous posts…. but not so much on this one.

 1: Slimbox

Slimbox is a lightweight lightbox that is an exact copy of Lightbox 2 but for mootools, both lightboxes being authored by Lokesh Dhakar. Slimbox is known for being small, effective, and fully customizable. Being only 4 Kb in size, it is a very quick and convenient method to feature your images.

Slimbox supports:  Images, and Image Sets

2: Multibox

Multibox is an amazing and multi-featured lightbox that can do some pretty sweet stuff. Phatfusion, alsoknown as “Made By Jam”, created Multibox to be completely full-featured, usable and accessible. They include several methods in navigating galleries and content, even keyboard shortcuts making the viewing experience that much more pleasurable.

Multibox Supports: Images, Image Sets, Inline Elements, Iframes, AJAX Content, Flash, Various Video Objects

3: Mediaboxadvanced

Mediaboxadvanced, created by John Einselen boasts to be an all in one solution, being capable of displaying your content how you want to. Now with their release of version 1.3.4 they also provide support for HTML5 players and compatibility with mobile devices. For beginners they also supply plenty of examples to implement Mediaboxadvanced.

Easybox Supports: Images, Image Sets, Inline Elements, Iframes, Video, Flash

4: CeraBox

CeraBox is the alternative lightbox, doing everything you need it to and being your alternative to any other. It has a large feature set, and with the release of their newest version, they now have added support for mobile devices even including finger gestures.

CeraBox supports: Images, Image Sets, Inline Elements, Iframes, AJAX Content, Video, and Flash

5: Milkbox

Milkbox is another lightbox clone but expanded. It does everything you would expect a normal lightbox to do and with style. Luca Reghellin, Milkbox Creator, provides us an easily customizable, user-friendly and HTML5 ready option to handle your basic lightbox tasks.

Milkbox supports: Images, Image Sets, Flash

6: Bumpbox

Although Bumpbox may not be the sexiest lightbox out there, it definitely competes for the most simple to implement. Not only is it quick to get set up, but it uses an auto-detection method to determine what content is being displayed. This is a great feature, especially for those of us who are considered noobs.

Bumpbox supports:  Images, Iframes, Video, Flash

7: ImageZoom

Have you ever wanted to view content both from inside of a lightbox and out at the same time, but got frustrated because you couldn’t? Well Bert Ramakers is here to change that all around with a new lightbox called ImageZoom. This clone allows you to view several images at once, also allowing you to drag the image out of the way so you can view whatever content may be underneath. Definitely makes for a cool user experience.

ImageZoom supports: Images, Image Sets

8: Litebox

The goal of Tyler Mulligan in developing this lightbox was size reduction. Weighing in at only 3 Kb Litebox is one of the smallest and “Lite” lightboxes around.

Fancybox supports:  Images, Image Sets

9: Smoothbox

Smoothbox is a beloved and well established lightbox clone. It is very easy to setup and very customizable to fit with any site. I have used it many times and it is a personal favorite of mine, hope you enjoy it as well.

Smoothbox supports: Images, Image Sets, Inline Elements, Iframes, AJAX Content

10: Quickbox

Quickbox finishes up our list of Mootools Lightbox Clones with its unique ability to quickly jump from one image to the next. Andrew Plummer has done a great job at making this one of the quicker more stable lightboxes here.

Quickbox supports: Images, Image Sets

Thanks for joining us for this rundown on Lightbox clones that use the Mootools Javascript Framework. Also a big thanks to planetozh.com for publishing The Lightbox Clones Matrix which helped considerably with our research.

 1: Floatbox

Floatbox starts off our top 10 list, for it’s amazing features and overall finesse. This clone is also amazingly configurable, and stylable, so you can match it to the look and feel of your website.

Floatbox supports:  Images, Image Sets, Inline Elements, Iframes, AJAX Content, Flash, Video

2: Greybox

Greybox sports a very simple yet elegant interface, it beautifully displays your content. It has a limited scope, with images and iframes, but it’s simplicity also ensures some low overhead clocking in at only 22K

Greybox Supports: Images, Image Sets, Iframes

3: EnlargeIt!

Enlargeit! is a pretty slick lightbox clone. It has some amazing customizability allowing you to change almost every aspect of the look and feel

EnlargeIt! Supports: Images, Image Sets, Iframes, Ajax Content, Video

4: Highslide

Highslide like EnlargeIt! has a sweet zooming animation, and a small footprint, as little as 8.5K. This clone has some unique features that make it a good nitch clone.

Highslide supports: Images, Image Sets, Inline Elements, Iframes, AJAX Content, Flash

5: Slidewindow

Slidewindow is a pretty good all around lightbox clone. And it is extremely small, weighing in at a minisqule 9.4K. It is a good choice for many, especially if you want to keep your overhead low

Slidewindow supports: Images, Image Sets

6: Lytebox

Lytebox has a gorgeous interface and some great features. And although it isn’t as lightweight as some of it’s friends on this list, it makes up for that with it’s great features.

tinyLightbox supports:  Images, Image Sets, Inline Elements, Iframes, AJAX Content, Flash, Video

7: ShadowBox

ShadowBox is another unique lightbox, unlike most other lightboxes this script uses not one single javascript library, but rather has the ability to run on many different javascript libraries, jQuery, Mootools, Prototype, and others. It also sports some great features and customizability.

ShadowBox supports: Images, Image Sets, Inline Elements, Iframes, AJAX Content, Flash, Video

8: Lightbox+

Lightbox+ is another highly customizable lightbox clone, that as you can see from the screenshot above can even add overlay images on top of your lightbox content.

Lightbox+ supports:  Images, Image Sets

9: Lighterbox

Lighterbox is a very quick and dirty lightbox script with no frills, but that translates into low overhead, and it clocks in at just 7.7K. This is a great script for sites that are concerned abou their page load speed.

Tinybox supports: Images

10: SubModal

Submodal finishes up our list of Lightbox Clones with it’s simple design and great utility. It has the common feel of a window in your operating system, so it is easy to use, and familiar to your site visitors.

pirobox supports: Ajax Content

Thanks for joining us for this rundown on Lightbox clones that use their own Javascript libraries. And a big thanks to planetozh.com for publishing The Lightbox Clones Matrix which helped considerably with our research.

 1: Lightview

Lightview is an innovative lightbox that came from the brain of its author Nick Stakenburg. Lightview’s unique and elegant style combine to give an amazing presentation, which is uniquely lightview.

Lightview supports:  Images, Image Sets, Inline Elements, Iframes, AJAX Content, Flash, Video

2: Fancy Zoom for Prototype

Fancy Zoom is a port of the original Fancy Zoom script so that it will run on the prototype framework. It has a flavor that is uniquely Fancy Zoom. Appearing to “Zoom” out from the associated content on the page, this script really brings your page alive.

Fancy Zoom Supports: Images, Image Sets, Inline Elements, Flash, Videos

3: Lightwindow

LightWindow is one of the most advanced Lightbox scripts that I have used. With extensive support for different content types, LightWindow is a truly amazing script.

LightWindow Supports: Images, Image Sets, Inline Elements, Iframes, Ajax Content, Video, Flash

4: Litebox

Litebox is a rewrite of Lightbox 2 script, with an emphasis on reducing the overall size of the script. The script is backwards compatible with all the lightbox 2 commands

Litebox supports: Images, Image Sets

5: Lightbox 2

Lightbox 2 the latest revision of the grandaddy script that started it all, is a simple lightbox that focuses on displaying images, and does it well.

Topup supports: Images, Image Sets

6: Hoverbox

Hoverbox is quite a unique script. Unlike most of the available lightbox scripts, Hoverbox includes many additional features, like Tooltips, Movable Windows, Multiple Window Styles, Windows on Hover Over, and the traditional Modal Window.

tinyLightbox supports:  Images, Image Sets, Inline Elements, Iframes, AJAX Content

7: Prototype Window

Prototype Window is another unique lightbox, unlike most other lightboxes this script uses the Apple window style for it’s theme, and allows you to use it in the same manner, ie: Multiple Windows, Resizable, Shade (roll up) the window, Zoom to Full Screen, etc. The main question is with most of these other functions… does Prototype Window qualify as a lightbox? You Decide.

Thickbox supports: Images, Inline Elements, Iframes, AJAX Content

8: ModalBox

ModalBox is another unique lightbox script. Instead of displaying content in the usual popup overlay box, ModalBox drops from the top of the page to grab the attention of your users. A very neat Lightbox clone.

Fancybox supports:  AJAX Content

9: TinyBox 2

Tinybox 2 is a very quick and simple ajax script that focuses on AJAX content. What it lacks in extra features it makes up for in agility and lower overhead, less than 5K of additional load time.

Tinybox supports: Images, Inline Elements, Iframes, AJAX Content

10: Simplebox

Simplebox finishes up our list of Lightbox Clones with its amazingly simple design and ease of use. Weighing just a bit more than our last entry at 6.8K it is still amazingly small.

pirobox supports: Inline Elements

Thanks for joining us for this rundown on Lightbox clones that use the Prototype Javascript library. And a big thanks to planetozh.com for publishing The Lightbox Clones Matrix which helped considerably with our research.

 1: Ceebox

Ceebox is an innovative lightbox that came on the scene as a result of  the author Colin Fahrion not finding a lightbox solution that quite had the the capability and finesse that he was looking for. Ceebox’s elegant style combined with some sweet video embedding skills that fit the bill.

Ceebox supports:  Images, Image Sets, Inline Elements, Iframes, AJAX Content, Flash, Video

2: Colorbox

Colorbox is an amazing and lightweight lightbox that has some pretty cool tricks under the hood. Jack Moore created colorbox to be completely unobtrusive, and very extensible. It has become very popular and has some great beginners guides to get you started.

Colorbox Supports: Images, Image Sets, Inline Elements, Iframes, AJAX Content

3: Easybox

Easybox is a simple yet powerful lightbox clone that tops the simplicity with a hefty helping of elegance. Don’t worry about your content, with Easybox’s excellent animations and content display capabilities you will be in good hands.

Easybox Supports: Images, Image Sets, Inline Elements, Iframes, Video

4: nyroModal

What nyroModal lacks in in elegance it makes up for in overall simplicity. With a simple UI and easy to use configuration it hides the customizability that peaks its feature list. Built by developers for developers this lightbox can be customized to match any look and feel that the user is looking for.

nyroModal supports: Images, Image Sets, Inline Elements, Iframes, AJAX Content

5: Topup

Topup is an amazing lightbox that breaks some of the normal conventions of lightbox tradition to provide a dynamic UI as well as a great feature set. Paul Engel has done an amazing job pushing the envelope with this one.

Topup supports: Images, Image Sets, Inline Elements, Iframes,  Flash, Video

6: tinyLightbox

tinyLightbox like many others has a simple and elegant interface. But one thing that it beats most other lightbox clones out on is overall size. Weighing in at a tiny 9.3k this little script gives you an amazing punch with a minimum amount of overhead.

tinyLightbox supports:  Images, Image Sets

7: Thickbox

Thickbox is one of the old standby’s of the lightbox arena. Cody Lindley sure did a bangup job on it, inspiring scores of developers to create lightbox clones of their own. Although Thickbox is not currently maintained, it still holds its own overall.

Thickbox supports: Images, Image Sets, Inline Elements, Iframes, AJAX Content

8: Fancybox

Fancybox is according to it’s webpage still a “work in progress” but then what software isn’t? Fancybox excels at suprising the user with cool effects and slick fades. Add mouse scroll wheel support and you have made a match to rival all others.

Fancybox supports:  Images, Image Sets, Inline Elements, Iframes, Flash

9: prettyPhoto

prettyPhoto is a beloved and well established lightbox clone. It is very easy to setup and flexible to match with any site. Customize it if you wish, and it is even compatible with IE6. Built in API’s make it extremely extensible and ready to serve your web clients.

prettyPhoto supports: Images, Image Sets, Inline Elements, Iframes, AJAX Content, Flash, Video

10: pirobox

pirobox finishes up our list of Lightbox Clones with its unique design and interesting approaches to the the lightbox arena. This is one amazing clone. Good job Pirolab.

pirobox supports: Images, Image Sets, Inline Elements,  Flash, Video

Thanks for joining us for this rundown on Lightbox clones that use the jQuery Javascript library. And a big thanks to planetozh.com for publishing The Lightbox Clones Matrix which helped considerably with our research.

Gradients are used virtually everywhere to improve the overal look and feel of most designs and applications. But up until recently these great graphical niceties on the web always had to be represented by a small or large graphic file, which depending on the skill of the designer/developer could add significant bloat to a website.

On to the scene enters CSS3 with many new features that (when properly utilized by compliant web browsers)  make the seemingly simple websites come alive. One of my favorite new features is the CSS Gradient. Now rather than adding bloat to a site with multiple graphics to improve the sites look and feel, now that can all be taken care of with just a few lines of CSS rules.

Now this new advancement in site design as powerful as it is, can be cumbersome, especially if the gradient is technically advanced with multiple stops and color changes. The raw development of the right CSS rule could take a significant amount of time, but no longer.

Thanks to Alex Sirota (iosart), web developers around the world now have free access to an amazing tool that significantly increases your CSS3 productivity. The Ultimate CSS Gradient Generator provides a easy to use (and fairly familiar interface for Photoshop Users) that not only allows you to create new gradients, but you can also save previous favorite presets, import gradient code from CSS, and import an image with a gradient on it.

I have used this tool a ton, and highly recommend it to any developers that are going to work with CSS3 Gradients in any way.

Head On Over To:

The Ultimate CSS Gradient Generator

Fancy Upload is one of those tools. Providing a slick interface and some dynamic classes, Fancy Upload leverages the abilities of the Mootools Javascript library and ties that with some flash integration to create a great solution with an infinate number of uses. Go check it out.

http://digitarald.de/project/fancyupload/

People every day find themselves without the ability to easily produce that documentation, and may not get their assets replaced by their insurance company, because they cannot prove the exact assets that they owned.

Treasurebox is built to provide a safe secure online storage location for that documentation, very accessible, and easy to use. The MooTools framework and extentions to it are used extensively to increase the usability of the product.

The initial release is currently in public beta. I would love any readers to sign up (No Credit Card or billing information required) and leave some comments here about your thoughts.

Treasurebox
Twenty Cent Productions, LLC

I look forward to the enhancements that will be made available with the 1.2 release. Exciting.

In later posts I will share and discuss scripts that use/extend the base functionality of MooTools to create some very amazing, usability enhancing, tools and effects.