Almost everybody uses a tool for displaying images, HTML content and media in a Mac-style “lightbox” that floats over top of web page. I remember when Thickbox was the tool of choice for almost every developer. It was one of the first jQuery tools I used in WordPress to design a gallery. Since then many other plugins, widgets, and libraries have been popping up. Just recently I came across ColorBox, when researching some interesting ways to display iFrames for a project I have been working.

Here is a small list to get you started, they are all built using the jQuery library and licensed under both MIT and GPL licenses.

ColorBox

The nice thing about ColorBox is that it works on Firefox 2 & 3, Safari 3 & 4, Opera 9, Chrome, Internet Explorer 6, 7, 8. This tool will pretty much load anything you need, it is really easy to modify at CSS level, image level, and the jQuery is pretty standard. One thing I did notice is that id tends to conflict with jquery-latest.js.

FancyBox

Great tool, updated often, lots of good documentation and examples.

Lightbox2

Lightbox is slowly becoming a standard and first choice for most developers. It is very user friendly if you are a nOOb to jQuery. Lightbox also has a very reliable WordPress plugin. You can see this plugin in in action on my portfolio.

Shadowbox.js

Shadowbox is written entirely in JavaScript and CSS and is highly customizable. This package is not jQuery (very similar), but very useful and has some nice effects. They offer both free and commercial licenses (30$-50$).

jQuery Dialog

jQuery dialog allows you to display floating windows. You can add scrollbars and drag features and they are easily customizable with minimal code.

If you have created anything unique or different with these tools, or want to recommend other alternatives please feel free to comment on this post.