The FancyBox JQuery plugin

The last years the use of lightboxes on websites has increased a lot. In this article I´ll explain what a lightbox is and I´ll give information about my favourite lightbox option.

A lightbox is, in short, a popup that opens (sometimes with a nice effect) as a new layer. Most of the times in the middle of the page and with a layer disabling click on areas outside of the box. Normally it´s used to show images at a bigger size, but it can also contain other media, html snippets or complete sites (in frames).

Over the past years I´ve used many lightboxes. The prototypeJS lightbox was one of the first and it is still used on many sites. But as times changes, things improve. And one of the most complete lightboxes available now is called FancyBox

This lightbox is a JQuery plugin and can display images, HTML snippets, flash, Iframes and Ajax requests. It is easily customizable through settings and CSS, allows groups related items and automatically adds navigation. Furthermore, if the mouse wheel JQuery plugin is included in the page FancyBox will respond to mouse wheel scrolls as well. Add fancy transitions and a nice drop shadow under the zoomed item and you have a very complete and beautiful lightbox solution.

Including the FancyBox plugin in your page is easy and can be resumed in 5 steps.

Check if your site uses a valid DOCTYPE.
Include the JS files. For the last FancyBox version you need JQuery 1.4 or newer. The FancyBox script you can download from the website of FancyBox (see link below). Optional are the mouse-wheel plugin and the transition pack (for more transitions)
Add the CSS file.
Create in your page a a element. For example: < a id="single_image" href="image_big.jpg">< img src="image_small.jpg" alt=""/>. In this example FancyBox will open the big image when you click on the small one.
And add script to execute the plugin when the page loads. An easy example is: $("a#single_image").fancybox();

This is a simple setup. You can check the website of FancyBox for more information or the links to the files needed.

The website that offers FancyBox also shows more options and they have a "Tips and Tricks" section. And if your FancyBox doesn´t work, you can check the frequently asked questions. In most cases this is sufficient. But if you need further help, they have a google group here: http://groups.google.com/group/fancybox

Fancybox website: http://www.fancybox.net

View the original article here