Uncaught TypeError: jQuery(…).fancybox is not a function ｜fancybox used in wordpress

1 Views

I have a wordpress website and I want to show my video using fancybox, so I tried wp plugin like “fancybox for wordpress” and “easy fancybox”.

But both of them give me the error message “Uncaught TypeError: jQuery(…).fancybox is not a function”.

Read More

I search for many questions on here and found this can be jquery conflict, but I cannot figure out where is it.
here is my site http://skyblueenglish.co.uk

Notice that I only have one of above plugins at one time.

Post Views: 1

Related posts

3 comments

  1. as per my thinking and till i have checked, what happen is,
    in word-press you have included fancybox jQuery and it will obviously installed when you have installed the plugin. Now what happen is ,while using some JS function or JS Class it is mandatory to include jQuery file before we use/include the third party JS.

    I checked the “View Source” for your page. 

    <script src="http://skyblueenglish.co.uk/wp-content/themes/skybluetheme/js/jquery.min.js"></script>

    and i found that above JavaScript file is included in the footer.
    i just removed that line and put it before 

    <script type='text/javascript' src='http://skyblueenglish.co.uk/wp-content/plugins/fancybox-for-wordpress/fancybox/jquery.fancybox.js?ver=1.3.4'></script>

    and the error is Gone.

    so what you have to do is, you have to find your footer, find the included jquery.min.js . remove it from the footer and include it from header.

    Let me know if you dont understand anywhere.

  2. ;( function( $ ) {

 $(document).ready(function(){

    $(".fancybox").fancybox({
       //....
    });

});

} )( jQuery );

  3. I did so many experiments on same topic and also tried with many different way to solve according to wherever I found similar topics on internet but trust me nothing worked out for me and then finally I simply tried to see what exactly error says:

    Uncaught TypeError: $(…).fancybox is not a function

    and for which I simply removed a line which was saying if($.fn.fancybox!==null).
    I am not strong enough to understand Javascript or Jquery thing being fresher so I just tried with simple logic and it worked for me lol.
    This might not be the right solution but just thought to share my experience so maybe for someone it may work too.

    It worked properly without loosing any function by removing below code

    if($.fn.fancybox!==null)
{$("a[class^='fancyBox']").fancybox();
$("a[class^='fancybox-thumb']").fancybox(
{helpers:{title:{type:'outside'},thumbs:{width:50,height:50}}});}

    Thank You!

Comments are closed.