fancybox 2.1.4 - Uncaught TypeError: Cannot read property 'helpers' of undefined

Question

Having some issues with a website that I am working on I can't seem to get fancybox to work correctly testing it with a YouTube clip.

Here is my script file. Using 2.1.4 with jQuery 1.9

script.js

var $j = jQuery.noConflict();

$j(document).ready(function(){

    $j('.flexslider').flexslider({
    animation: "slide"
  });

    $j('.fancybox-media').fancybox({
        openEffect  : 'none',
        closeEffect : 'none',
        helpers : {
            media : {}
        }
    });

});

the flexslider works just fine however the fancybox-media is having issues. when i click the link it just opens the link instead of opening media file in a fancybox window.

Inside the chrome console it is saying

Uncaught TypeError: Cannot read property 'helpers' of undefined jquery.fancybox-media.js:88
(anonymous function) jquery.fancybox-media.js:88
(anonymous function) jquery.fancybox-media.js:196

The link is defined as:

<h2><a class="fancybox-media" href="http://www.youtube.com/watch?v=czQipWJA8EU">Watch This Video</a></h2>

Also if you want to look at the site in development it can be found at www.miems.co

Any ideas please let me know. Sincerely, David

Answer 1

Given that there are hundreds of views and no answer yet

The

$('.fancybox').fancybox();

needs to be called before calling any other code from fancybox

In my case I had change the order in which javascript gets executed, from:

<script type="text/javascript" src="/static/js/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript" src="/static/js/jquery.fancybox.js?v=2.1.5"></script>

to:

<script type="text/javascript" src="/static/js/jquery.fancybox.js?v=2.1.5"></script>
<script type="text/javascript" src="/static/js/jquery.fancybox-thumbs.js?v=1.0.7"></script>

Answer 2

I ran into this exact same error because I had foolishly included the jquery.fancybox.js twice on the page. Just remove the second call, and the problem should be fixed.