Graphics Unplugged

Adding Fancybox to Dynamically Loaded Content

Posted by Kyle Diedrick

FancyboxThe 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.

Fancybox Instant Now Available!

Want to learn more about the Fancybox plugin for jQuery? Check out my latest book! In it you will learn about all of Fancybox's features through straight forward examples. Buy the book here!

14 CommentsPosted May 21st, 2011Kyle Diedrick

14 responses to “Adding Fancybox to Dynamically Loaded Content”

  1. Chris says:

    Thanx for sharing. You saved my day. Your live(‘mouseenter’, … Tweak worked perfectly with the dynamic content loaded into the page. Before the URL opened in the Browser now it is displayed in the fancybox.

  2. kushan says:

    mouseover fires when the pointer moves into the child element as well, while mouseenter fires only when the pointer moves into the bound element.

    taken from the jquery site. seems like you have it mixed up.

  3. Laci says:

    Works like a charm, thank you very much!

  4. Pratip Ghosh says:

    Thanks a lot!!!

    You are a savior

  5. Jackson says:

    Hi,

    I don’t think the “Gallery” function works when using this method, can you confirm please?

    • This is correct. This method is designed only to pop up the fancybox content linked to, in order to use the gallery functionality you should look at the fancybox api page (http://fancybox.net/api).

      • Brett says:

        Sorry, how can we can this to work as a gallery? It seems to re-use the same image over and over again, even if a gallery is explicitly set. This is due to the fact that Fancybox only get’s generated on mouseenter, which won’t contain every element you require in a gallery. So what’s the work around for that?

  6. Nirmal says:

    in mounseenter event, event.preventDefault() will make it work for sure.

  7. Ofir says:

    Thanks!!! That is a really clever workaround.

  8. Gregory says:

    Thanks! This perfect solution saved my time!

  9. Ya it nice but I want inserted of image dynamic text which is coming from database. Can anybody help me please.

  10. Pedro Barcelo says:

    Hello,
    I am having a problem combining JQuery load() and fancy box.
    My problem is this: I have a page1 which load via the JQuery load function page2 (this work fine). Now page2 have a link to page3. This is my problem, I need the content of page three to be displayed on a fancy box without leaving page1.

    Thank you

  11. GN says:

    You have solved a problem i’ve been wrestling with for days here 🙂 Thanks so much!

Leave a Reply

Your email address will not be published. Required fields are marked *

Archives
Recent Posts