Search code examples
javascriptjquerywordpressfancybox

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

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

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.

Solution

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