ThickBox, a Lightbox-like modal window framework for the browser written by Cody Lindley that runs on top of the jQuery library, has been given a bit of an upgrade. The new 2.0 release adds greybox functionality (iFramed content), image set support (similar to the Lightbox 2.0 functionality), and is now running on jQuery 1.0 among other things.

You might be asking yourself:

“Why wouldn’t I just use Lightbox 2.0 if ThickBox 2.0 does the same thing?”

The answer is simple. Uncompressed, the jQuery library and the ThickBox add-on script come in at only 51kb (and at just 27kb if jQuery is compressed), whereas the Lightbox Javascript files alone are over 100kb combined. Think about the amount of bandwidth saved and the increased loading time for the end user.

Won’t someone please think of the children end user?

Another advantage that ThickBox has over Lightbox is that images are automatically resized if the browser window is too small to display them full size without scrolling. Also, clicking outside of the modal window closes it in ThickBox, whereas in Lightbox, a “close” button must be clicked to remove it from the screen.

Visit the ThickBox demo site for instructions on installation, demos of different techniques (including iFramed content and AJAX content), and support information.

Currently supported and tested browsers include Internet Explorer 6 and 7, Firefox 1.5+ on both OS X and Windows, Opera 9+ and Safari 1.3.2 and 2.0.3., though it should work on any modern browser. ThickBox is protected by the MIT License.

Steven Wittens of Drupal fame has released a nifty jQuery plugin of his own called Farbtastic. So what does it do, you ask?

Farbtastic uses layered transparent PNGs to render a saturation/luminance gradient inside of a hue circle. No Flash, no pixel sized divs.

With Farbtastic, a simple form input box turns into an auto-updated hex code whose background color changes accordingly with the clickable color wheel and block added by the 8kb Javascript file. Click the color, drag the chooser or enter in a hex code manually.

Just include the farbtastic.js file along with the farbtastic.css stylesheet and create a placeholder div along with a form element for the hex code like so:

<form>
    <input type="text" ... />
</form>
<div id="colorpicker"></div>

And then include the one line jQuery code:

$('#colorpicker').farbtastic('#colorpickerinput');

That’s all there is to it! You should now have a color picker widget on your page.

To see a working demo as well as more in depth instructions on using the plugin, visit the Farbtastic page. Farbtastic is protected by the GPL.