Conditionally load Fancybox resources with Yepnope.js

Question

I'm trying to conditionally load Fancybox js and css code and execute it on an element only if the element is present and I'm in a particular page. So far I've been trying the following code:

yepnope({
test : jQuery('body').hasClass('edizioni'),
yep  : ['/assets/css/jquery.fancybox.css','/assets/js/libs/jquery.fancybox.pack.js','/assets/js/libs/jquery.mousewheel-3.0.6.pack.js',
        jQuery("#gallery a").fancybox()]
});

I get a Uncaught TypeError: Object [object Object] has no method 'fancybox'

I guess jquery is functioning ok and the resources jquery.fancybox.pack.js gets loaded properly. What's wrong with my implementation?

Answer 1

You'll need to use the callback feature of yepnope. The way you have it now, it tries to execute jQuery("#gallery a").fancybox() at the same time as requesting the fancybox.pack.js. It doesn't load the files sequentially. The callback is triggered each time a resource is loaded, you'll need to verify the URL.

This should work, or get you started at least:

yepnope({
    test : jQuery('body').hasClass('edizioni'),
    yep  : ['/assets/css/jquery.fancybox.css','/assets/js/libs/jquery.fancybox.pack.js','/assets/js/libs/jquery.mousewheel-3.0.6.pack.js'],
    callback: function (url, result, key) {
        if(url === "/assets/js/libs/jquery.fancybox.pack.js"){
            // Fancybox has loaded, it's safe to call it now
            jQuery("#gallery a").fancybox();
        }
    }
});