Question

I’m using the http://fancyapps.com jQuery plugin Fancybox v2. It took me a while to see the error, but here it is.

I only know how to debug “progressively” or “step by step” in Google Chrome, so in Chrome, access developer tools and then select the SCRIPTS tab. From there, make select “Pause on uncaught exceptions” here (http://drm.st/ELqh), then click on one of the thumbnails at the top left of this page: http://dreamstartest.net/#!/gallery/ (site in development).

These should load the linked images inside Fancybox’s modal popup, however, it’s throwing a Fancybox is not defined error. What’s really throwing me off is that Chrome Dev Tools RESOURCES tab doesn’t show any scripts which failed to load. So why is the function undefined? Any insights would be greatly appreciated, this has been killing me for hours now.

Answer 1

In your scripts js file you have this function (line 25):

$("#content a[rel=video_box], a.video-box, a.fancybox").live('click', function(){
 fancybox({
 'hideOnContentClick': false,
 overlayShow: true,
 showNavArrows: true
 });
});

The error you are getting is because the line

fancybox({

should be

$.fancybox({

However, you should also consider that since you are using Fancybox v2.x there is not need to use the .live() method. Additionally you are using jQuery v1.7.x where .live() has been deprecated.

Another thing is that you are using fancybox API options for v1.3.x. Check the documentation for fancybox v2.x since options are new and not compatible between previous versions.

Your function updated to v2.x should work better like:

$("#content a[rel=video_box], a.video-box, a.fancybox").fancybox({
 closeClick: false,
 arrows: true
});