Question

Why is it that this works: http://jsfiddle.net/w82W8/1/
But this doesn’t?: http://jsfiddle.net/w82W8/2/

This question may seem convoluted; you may wonder, why not just use the first!? Why are you using jQuery to load in JS+CSS assets that you could easily load in the original HTML.

Well, I’m in the process of building a web widget and I’d like to keep the embed code as small as possible. The idea is to have the user include a single <script type='text/javascript' src='http://mysite.com/widget.js'></script> line in their code, and the widget.js code will take care of all the details. Including fetching fancybox.

I’m getting the error: Uncaught TypeError: Object [object Object] has no method ‘fancybox’

I hypothesize that javascript is not waiting for fancybox.js to load, and immediately attempting to apply fancybox() to the trigger. Can I get a callback working here when the assets have been loaded? I’m certain they are getting included in the DOM though… I’ve inspected with Chrome Tools.

I know this question has been asked on StackOverflow before, but not in this context.

Thanks, and Happy Holidays!

Answer 1

At the second method, the fancybox method is called before the Fancybox plugin has loaded. Use the getScript method if you want to execute code after loading a script.

Example:

$.getScript(
    "http://jordanarsenault.com/fancy/fancybox.js",
    function(){
       $(".trigger").fancybox();
    }
);

If you need an advanced resource loader, consider using a real loader, such as yepnope.