Uncaught TypeError: jQuery(...).fancybox is not a function｜wordpress中使用的fancybox

Posted 2023-05-09

【中文标题】Uncaught TypeError: jQuery(...).fancybox is not a function｜wordpress中使用的fancybox

【英文标题】：Uncaught TypeError: jQuery(...).fancybox is not a function ｜fancybox used in wordpress

【发布时间】：2016-04-15 13:40:56

【问题描述】：

我有一个 wordpress 网站，我想使用 fancybox 展示我的视频，所以我尝试了 wp 插件，例如“fancybox for wordpress”和“easy fancybox”。

但是他们都给了我错误信息“Uncaught TypeError: jQuery(...).fancybox is not a function”。

我在这里搜索了很多问题，发现这可能是 jquery 冲突，但我不知道它在哪里。 这是我的网站http://skyblueenglish.co.uk

请注意，我一次只有上述插件之一。

【问题讨论】：

如果不检查文档，我希望您在 wordpress 中注册您的代码文件。

这可能会有所帮助codex.wordpress.org/Function_Reference/wp_enqueue_script

【参考方案1】：

根据我的想法，直到我检查过，会发生什么， 在 word-press 中，您已经包含了 fancybox jQuery，它显然会在您安装插件时安装。现在发生的情况是，在使用某些 JS 函数或 JS 类时，在我们使用/包含第三方 JS 之前必须包含 jQuery 文件。

我检查了您页面的“查看源代码”。

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

我发现上面的 javascript 文件包含在页脚中。 我刚刚删除了那行并把它放在前面

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

错误消失了。

所以你要做的是，你必须找到你的页脚，找到包含的 jquery.min.js 。从页脚中删除它并从页眉中包含它。

如果你不明白任何地方，请告诉我。

【参考方案2】：

;( function( $ ) 

 $(document).ready(function()

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

);

 )( jQuery );

【参考方案3】：

我在同一个主题上做了很多实验，还尝试了很多不同的方法来解决我在互联网上找到类似主题的任何地方，但相信我没有任何结果，最后我只是试图看看错误到底是什么意思：

未捕获的类型错误：$(...).fancybox 不是函数

为此，我只是删除了一条写着if($.fn.fancybox!==null) 的行。 我不够强大，无法理解更新鲜的 Javascript 或 Jquery，所以我只是尝试了简单的逻辑，它对我有用，哈哈。 这可能不是正确的解决方案，但只是想分享我的经验，所以也许对某人来说它也可以工作。

通过删除以下代码，它可以正常工作而不会丢失任何功能

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

谢谢！