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
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>