Adding Fancybox to Dynamically Loaded Content

The fancybox plugin is a great and easy to use jQuery plugin that allows you to show mac OS X-like light boxes on a website.  One of the things that I have found myself wanting to do this week is get this plugin to work on dynamically loaded content.  Since I found only a few ways to get this to work I thought that I would demonstrate my way to get this plugin to do this.  But first, let’s look at how to set the plugin up on regular content.

See the Demo!

Setting up Fancybox

Setting up the fancybox jQuery plugin is incredibly easy.  First, download the plugin from their site: http://fancybox.net. Next you need to load the scripts and stylesheet files onto the page.  You will also need the jQuery library:

jQuery:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

Fancybox JavaScript:

The next step is to move the Fancybox folder from the zip package that you downloaded from their site into your own site’s JavaScript folder (or put it anywhere you like, just remember where it is).  For the sake of the demo I just put the Fancybox folder on the base directory of the demo page.

<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>

Fancybox Styles:

You will also need the stylesheet for the plugin:

<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" />

Keep in mind that you need to keep the images and CSS file in the same directory or else the CSS cannot find the images.

Getting it working:

Getting fancybox working is actually very simple.  If it is the only JavaScript you intend to use your scripts file will look something like this:

$(document).ready(function(){
    $('mySelector').fancybox();
});

And that’s it!  Keep in mind that you will want to load your script file on the pages that use the plugin.  If you aren’t familiar with jQuery I recommend using their tutorial on how t0 get started: http://docs.jquery.com/Tutorials

Fancybox with Dynamic Content

Now that we know how to get Fancybox to work on regular content, let’s take a look at how to get it to interact with dynamically loaded content.  By default Fancybox will not do this.  I believe this is intentional to allow it to play nice with older versions of jQuery, but if you’re using any version of jQuery after 1.3 this easy workaround will work great.  If you aren’t, you should upgrade! There are very few reasons not to and it is very easy!

What we are going to do is use the jQuery live event handler combined with the mouseenter event handler to attach events after the content is loaded to the page. This allows us to attach the fancybox plugin to content when a user mouses over the object that we have loaded dynamically.  The code to make this happen looks like this:

$(document).ready(function(){
    $('mySelector').live('mouseenter', function(){
        $(this).fancybox();
    });
});

And that’s all there is to it!  I have found other ways to make this work but this seems to be by far the most simple to implement.  I used mouseenter instead of mouseover because the mouseenter event will trigger when the user moves their mouse over child objects (html elements inside the element you use as your selector) as well, while the mouseover event will not.  This ensures that child elements will trigger the plugin to become active even if they are visibly outside of the parent element.

More About Fancybox

I also wanted to mention quickly that Fancybox allows you to define some parameters about the way the plugin works, and the list of parameters, values, and how to implement them can be found on their site: http://fancybox.net/api

The basic implementation follows this structure:

$('mySelector').fancybox({ 
    parameter: value,
    parameter2:value2
});

Here are the parameters I used for the demo:

$(this).fancybox({
    'overlayColor': '#000',
    'overlayOpacity': 0.6,
    'transitionIn': 'elastic',
    'transitionOut': 'elastic',
    'centerOnScroll': true,
    'titlePosition': 'over',
    'easingIn': 'easeOutBack',
    'easingOut': 'easeInBack'
});

If you have any questions or are having trouble getting it to work, please leave your answer (and code!) in the comments below.

Tags: Fancybox, jQuery, jQuery plugins

This entry was posted on Saturday, May 21st, 2011 at 9:34 pm and is filed under Development, Javascript.

Like what you've read? Please subscribe or share!

You can leave a response, or trackback from your own site.