Search code examples
javascriptjqueryhtmlfancybox

Dynamically load fancybox and attach it?

I am trying to dynamically load fancybox via getScript and then attach it to a element. I have the fancybox dynamically load inside of a document ready...

So it goes.

documents ready -> getScript

But it doesn't seem to want to attach to my a tag (.fancybox) if I do a console.log jQuery('.fancybox') I get a [] but the element is already loaded? And if I type in jQuery('.fancybox').fancybox(); in the console in Google Chrome it still doesn't work?

Any idea what I am doing wrong?

jQuery.getScript("/fancybox/jquery.fancybox.pack.js", function() {
      console.log(jQuery(".fancybox"),jQuery("a"));
      return jQuery(".fancybox").fancybox();
    });

The element is a simple a tag wrapping an image, and it is NOT dynamically loaded.

<div class="youtube"><a href="http://www.youtube.com/watch?v=1svYgdfgfdf" class="fancybox"><img height="181" src="images/youtube-video.png" width="326"></a></div>
Solution

  • document ready is too early try wrapping it in $(window).load(function(){//CODE HERE}); instead because it needs to run only after DOM has loaded so it can apply your fancybox to your DOM element.