Question

我无法使用基本的jquery fancybox。我尝试使用fancybox网站上的文档（http://fancybox.net/howto），一个单独网站上的教程（http://www.websitecodetutorials.com/code/jquery-plugins/jquery-fancybox.php），我尝试浏览一些其他相关帖子以检查常见问题（{{3 }}），（Basic "jquery fancybox"），（Fancybox not working）。

我觉得我有一些简单的东西可以忽略。在调用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

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

Answer 1

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

Answer 2

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

TypeError：$（...）。on不是函数

这意味着功能＆＃34; on＆＃34;不存在。 jQuery文档 - http://api.jquery.com/on/ - 表示

版本添加：1.7

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

基本的Fancybox实现

2 个答案: