基本的 Fancybox 实现答案

【问题标题】：Basic Fancybox Implementation基本的 Fancybox 实现
【发布时间】：2017-03-21 16:49:08
【问题描述】：

我一直无法让基本的 jquery fancybox 工作。我尝试使用 fancybox 网站 (http://fancybox.net/howto) 上的文档、单独网站 (http://www.websitecodetutorials.com/code/jquery-plugins/jquery-fancybox.php) 上的教程，并尝试浏览其他一些相关帖子以检查常见问题 (Basic "jquery fancybox")、(@ 987654324@), (FancyBox not working at all).

我觉得我忽略了一些简单的事情。在调用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

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

【问题讨论】：

您的控制台中是否有任何错误？
我应该考虑看看那个。是的，它确实显示了一个错误：jquery.fancybox.js:2659 Uncaught TypeError: $(...).on is not a function at jquery.fancybox.js:2659 at jquery.fancybox.js:2661
你使用的是最新版本的jQuery吗？
否；我用的是1.4。我将其更改为 3.1.1 并且有效。谢谢，丹尼尔！（有没有办法让我将您的评论标记为答案？）
没问题，如果你不能支持我的评论，那就别担心。确保将答案标记为正确，以便将其视为已解决。 ??????

标签： jquery html fancybox-3

【解决方案1】：

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

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

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

添加的版本：1.7

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

【讨论】：

【解决方案2】：

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

【讨论】：