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: 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

For those who are fortunate enough to find themselves doing development on the mac platform, there is an alternative, which although it may not be the newest game on the block, it is one of the best all around. Sissy FauxVelopers need not apply to use this app. It has no build your app with one click buttons. It is designed to take the development experience to the next level for those who like to get their “fingers” dirty and actually do some major textual manipulations.

From the first launch it’s basic simplicity and power are immediately perceptible. It is feature packed enough to quell the pining soul of the most advanced developer, but simple enough to handle basic text document edits. From customizable coloring of the interface (I prefer the “All Hallow’s Eve” scheme) to the elegant line numbering and code folding features in the applications “trough”, this bad boy was built to move mountains and work minor miracles.

With built in support for dozens of predominant document formats, it provides out of the box streamlining of your developer workflow while also allowing you to add your own file format specifications should you happen to be crafty enough to have come up with your own file formats and specifications.

Additionally you can create functions to validate your files layout and formatting right into your file specification. Giving you on the fly access to all the features you want when you are developing.

This great product has seen me through many development projects, and has greatly increased my development capacity through it’s simplistic yet powerful functions.Although this product isn’t free, it is well worth the €39 purchase price, and it comes with a 30 day trial for all parties that may be interested, but not yet committed to the purchase.

Go give it a test spin. All you have to loose is pain and frustration.

Download Demo

Homepage

Check it out

Css Message Boxes

Elements of Design

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/