jQuery lightBox vs ColorBox vs FancyBox vs Thickbox – What are the key differences?
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.
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.
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.
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.
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.
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.
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.
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).
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.
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.