0

我一直无法让一个基本的 jquery fancybox 工作。我尝试从fancybox 网站（http://fancybox.net/howto）上的文档工作，这是一个单独网站上的教程（http://www.websitecodetutorials.com/code/jquery-plugins/jquery-fancybox.php），我尝试浏览其他一些相关帖子以检查常见问题（基本“jquery fancybox”）、（Fancybox 不工作）、（FancyBox 根本不工作）。

我觉得我忽略了一些简单的事情。在调用fancybox 之前，我使用CDN 调用jquery。我有一个指向 fancybox css 文件的链接。我尝试将脚本调用移动到 head 和 body 标签内的 fancybox。

我已经测试过 jquery 可以与成功触发的警报功能一起使用。fancybox css 和 js 文件与我的 html 文件和图像位于同一目录中。以下是我目前正在测试但没有成功的精简 HTML。

HTML：

<!DOCTYPE Html>
<html>
    <head>       
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
        <link href="jquery.fancybox.css" />
        <script src="jquery.fancybox.js"></script>
    </head>
    <body>       
        <a data-fancybox="gallery" href="BigNewLogo.png"><img src="newLogo.PNG"></a>
        <a data-fancybox="gallery" href="BigNewLogo.png"><img src="newLogo.PNG"></a>
    </body>
</html>

结果与排除 fancybox 的行为相同。它显示小图像，当您单击它们时，您将离开页面以查看大图像。

更新：控制台日志中出现以下错误：

Uncaught TypeError: $(...).on is not a function
    at jquery.fancybox.js:2659
    at jquery.fancybox.js:2661
(anonymous) @ jquery.fancybox.js:2659
(anonymous) @ jquery.fancybox.js:2661

非常感谢任何帮助。谢谢！

4

2 回答 2

0

问题是我使用的是 jquery v1.4（类似于fancybox 网站上的指南）。将此更改为 jquery 3.1.1 解决了该问题。

于 2017-03-21T18:44:00.640 回答
0

在这些情况下，您应该始终查看开发人员控制台以获取任何线索。在您的情况下，消息说：

TypeError: $(...).on 不是函数

这意味着“on”功能不存在。jQuery 文档 - http://api.jquery.com/on/ - 说

添加的版本：1.7

因此，您需要 jQuery 版本高于 1.7 才能使其工作。

于 2017-03-21T19:41:29.640 回答