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

Lawful

Well after playing around i said heck with it and ended up fixing it by dropping back to jquery-1.8.0.min.js and rolling back to fancybox 2.0 instead of using media frame i decided to go with the old iframe setup so using this now. – Lawful

Your fancybox code works just fine with jQuery v1.9.1, check JSFIDDLE ... are you sure you didn't forget to include the jquery.fancybox-media.js file? – Lavalley

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>

Laconic

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.

Harneen

Answer 3

In wordpress, After long research and updates:

having had the theme loaded with Fancybox and in addition to this I had a plugin also using fancybox, This created a double call to Fancybox. Ashish Kumar pointed that out. Thank you I only disabled the plugin and all errors disappeared.

Theme: tourpackage

Plugin: Easy Fancybox

Soil