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

 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.

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

Obviously there are many different ways to do this, you can validate the data on the back end as it receiving script is processing, and send an error, requesting that the user input correct information. Or you can do Front end processing on the data when the form is submitted and through JavaScript tell the user that the data is not correct, or you can validate the data as the client is inputing the information, thus allowing the client to correct the error before continuing on (especially useful in large/long forms). Or a combination of the 3, validate on the fly, on submit, and on return.

There is a myriad of different front end scripts that have popped up to handle the front end/live validation, one that I started using was LiveValidation, It was a useful library, but Since I was already using MooTools anyway, there was additional overhead to use this additional library, as well as the validation messages all appeared inline with your other content, and this tended to be a difficult thing to work with in cramped conditions.

This led me to search around a bit more and I found Formcheck, A live validation script based on mootools. It was lighter weight, since it was using the library that I was already using. The configuration/integration was about 100 times easier to implement and manage. And the notification appeared as a hovering box rather than and inline notification, which was just the icing on the cake.

Light, Easy, and Pretty, who could ask for more.

Formcheck Demo

Formcheck Documentation

Formcheck Download

http://moo.floor.ch/

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.