基本的 Fancybox 实现

Question

我无法让基本的 jquery fancybox 工作。我尝试使用 fancybox 网站上的文档 (http://fancybox.net/howto), a tutorial on a separate website (http://www.websitecodetutorials.com/code/jquery-plugins/jquery-fancybox.php), and I tried browsing a few other related posts to check for common issues (Basic "jquery fancybox"), (Fancybox not working), (FancyBox not working at all)。

我觉得我忽略了一些简单的事情。在调用 fancybox 之前，我使用 CDN 调用 jquery。我有一个 link 到 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

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

Answer 1

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

Answer 2

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

TypeError: $(...).on is not a function

意思是函数"on"不存在。 jQuery 文档 - http://api.jquery.com/on/ - 说

version added: 1.7

因此，您需要 jQuery 高于 1.7 的版本才能运行。

基本的 Fancybox 实现

Basic Fancybox Implementation

jquery

html

fancybox-3