jQuery Fancybox Plugin Made Easy Tutorial

View Demo

There are many jQuery lightboxes out there, but in my opinion, Fancybox is the the best. It's the nicest looking, and offers the most customizable options right out of the box. The Fancybox plugin is pretty easy to implement, but it did take me awhile to work out the kinks, so I'll try and break it down a little bit further. As always, just study the demos source code for a deeper understanding. Here it is in it's most simplest form. And a few tips are listed futher down below.

Step 1: Download and link to jQuery.

Step 2: Download and link to the jQuery Fanybox Plugin.

Step 3: Download and link to the jQuery Fanybox CSS.

Step 4: Download jQuery Fanybox Images to your prefered location.

Step 5: Fire the jQuery Fancybox (in it's most simplest form).

$(document).ready(function() {
    $("a#link").fancybox({	
    });
});

Step 6: jQuery Fancybox HTML (in it's most simplest form).


<a href="image.jpg" id="link">Fancybox</a>

A little explanation starting from the top... To customize the look of Fancybox, target div#fancy_inner to change the border color, and target div#fancy_div to change the background and text color, overflow, etc. If your calling an outside page (e.g. outsidepage.html), then simply add class="iframe" to the anchor. If your trying to put a fully functional form inside fancybox, then make it easy on yourself, and just put it in an outside page and be done with it. It's very difficult to have a inline (in page) working form within Fancybox. If you run into a problem, then just search this group of questions/discussions on Fancybox, as most likely it's already been answered. And lastly, if opening a video in IE, you may find (as I did) that when you close Fancybox, it closes, but the audio keeps playing. To fix, you need to do a callback as illustrated below.

$("a#link").fancybox({
    'frameWidth': 300,
    'frameHeight': 300,
    'callbackOnClose': function() {
       $("#fancy_content").empty();
          }
     });

ADVERTISE HERE