5

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

FluxSine
  • 51
  • 1
  • 1
  • 3
  • 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. – FluxSine Mar 16 '13 at 23:39
  • Your fancybox code works just fine with jQuery v1.9.1, check **[JSFIDDLE](http://jsfiddle.net/E6PYz/1/)** ... are you sure you didn't forget to include the jquery.fancybox-media.js file? – JFK Mar 19 '13 at 05:50

3 Answers3

10

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>
matcheek
  • 4,887
  • 9
  • 42
  • 73
1

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.

Ashish Kumar
  • 76
  • 5
0

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

wpcoder
  • 437
  • 5
  • 15