jQuery lightBox vs ColorBox vs FancyBox vs Thickbox – What are the key differences?

Sam Deering

It seems everyone is asking this question lately! What do these lightbox/thickbox/fancybox/colorbox jQuery plugins have in common and what are their differences? I thought I’d go and do my next blog assignment and here’s the result. I have also included the download link for WordPress options since all of them work with WordPress too.

Related Posts:

What is jQuery lightBox?

lightBox

It is a plugin for jQuery and it was inspired in Lightbox JS by Lokesh Dhakar.

Features:

> Simple, elegant and unobtrusive plugin.
> Does not require extra mark up.
> Customizable jQuery lightBox plugin.
> Used to overlay images on the current page through the power and felixibility of jQuery selector.
> It has some configuration that you can define when call it.

Source
Demo
Download

For WordPress Option:

Lightbox Plus permit users to view larger versions of images without having to leave the current page. Lightbox is able to add a lightbox to WordPress gallery images, display simple slide shows, video, forms and external content in overlays.

Source
Demo
Download

What is jQuery ColorBox?

ColorBox

Is a lightweight customizable lightbox plugin for jQuery 1.3+. Lightweight (9kb) and supports photos, photo groups, slideshow, Ajax, inline, and iframed content.

Features:

> Completely unobtrusive plugin.
> Options are set in the JS and require no changes to existing HTML.
> Appearance is controlled through CSS so it can be restyled.
> Can be extended with callbacks and event-hooks without altering the source files.
> Preloads upcoming images in a photo group.
> Used on tens of thousands of sites, including imgur.

Source
Demo
Download

For WordPress Option:

Colorbox/Lightbox plugin for WordPress has feature eleven themes for you to choose from. Image below are two examples of eleven themes.

Source
Demo
Download

What is jQuery FancyBox?

FancyBox

It is a tool for displaying images, HTML content and multi-media in a Mac-style “lightbox” that floats overtop of web page.

Features:

> Can display images, HTML elements, SWF movies, Iframes and also Ajax requests.
> Customizable through settings and CSS.
> Groups related items and adds navigation.
> If the mouse wheel plugin is included in the page then FancyBox will respond to mouse wheel events as well.
> Support fancy transitions by using easing plugin.
> Adds a nice drop shadow under the zoomed item.

Source
Demo
Download

For WordPress Option:

FancyBox for WordPress is a WP plugin that uses jQuery to display images when clicked, without reloading the page. It uses FancyBox by Janis Skarnelis.

Source
Demo
Download

What is jQuery Thickbox?

Thickbox

ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

thickbox

Features:

> ThickBox was built using the super lightweight jQuery library. Compressed, the jQuery library is 20k, uncompressed it’s 58k.
> The ThickBox JavaScript code and CSS file only add an additional 15k (only 10k by using the thickbox-compressed.js) on top of the jQuery code. The CSS file could additionally be compressed if need be.
> ThickBox will resize images that are bigger than the browser window.
> ThickBox offers versatility (images, iframed content, inline content, and AJAX content).
> ThickBox will hide form elements in Windows IE 6.
> ThickBox will remain centered in the window even when the user scrolls the page or changes the size of the browser window. Clicking an image, the overlay, or close link will remove ThickBox.
> Due to the ThickBox creator’s view that transitions should be tailored by individual authors, ThickBox windows do not implement fancy transitions. Feel free to add them as you see fit. Is this a feature? Well, some might say it is.
> ThickBox can be invoked from a link element, input element (typically a button), and the area element (image maps).

Source
Demo
Download

For WordPress Option:

Thickbox is also available as a wordpress plugin. If you’d like to embed ThickBox into your blog just install this plugin, insert ThickBox compliant markup whereever you want and you’re all set.

wordpress-thickbox

Source
Demo
Download

Conclusion

If you are going to study these four plugins thoroughly you will see that all of them don’t have much difference from each other. All of them are lightweight and can be personalized/customized through settings and CSS. Options are set in the JavaScript and require no changes to existing HTML markups. All are completely unobtrusive plugins that are well built for thier purpose. Bear in mind though that Thickbox is no longer maintained and Colorbox and Fancybox are preferred.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.echteinfach.tv/ Franky

    We are using fancybox for some sites. It’s great and efficient.
    Colorbox seems interesting as well. Thanks for pointing it out ;)

  • http://www.studioweber.ro Alex Flueras

    I am now using Media Box Advanced – loaded with features.

  • Scott

    You are describing out-dated version of fancybox

  • Pingback: 10 jQuery, Mootools, Prototype Lightbox Scripts | jQuery4u

  • Ciantic

    New FancyBox 2.0 is not anymore GPL/MIT licensed.

    It is now “Creative Commons Attribution-NonCommercial 3.0″, which I suppose prohibits using it in works one sells to clients (e.g. WordPress themes sold to client).

    This issue needs a new player, one that is open source and free to use.

  • http://realita.org Martin

    this help me, i think i will use FancyBox…

  • Pingback: Popup di testo con Wordpress e Fancybox

  • http://www.macnow.cc Larry

    Thank you very much for this comparison. For a new project I’m now at a point where I have to decide which implementation fits best and your post helped me!

  • testset

    Fucking LAME SITE

  • uma mahesh varma seeram

    Hi,

    This helps me to know the exact difference between other plugins and nice explanation :)

  • meskarune

    This comparison would be much better if you mentioned pricing.

  • http://www.flavors.me/warmth Daniel @warmth Delgado

    Great comparison but a bit outdated, how about a Pt. 2 with new features and new plugin comparisons?

    • http://jquery4u.com/ jQuery4u

      Hey Dan, sounds good mate, if you want to write it I can review and potentially make you an author.
      Sam

      • http://www.flavors.me/warmth Daniel @warmth Delgado

        I will consider it but atm I’m too busy! Please mention me that on Twitter to save the tweet as a reminder.

  • Pingback: Need some help with jQuery and Gallery3

  • Rhys Ludlow

    Very helpful roundup for me. Do you know of a wp plugin that will a pop a lighbox up on a mouseover with no click required?

  • Pim

    Be aware that fancy box requires a fee for commercial use, while color box is open source…