基本Fancybox实现

我一直无法获得一个基本的jquery fancybox工作。我试图从fancybox网站上的文档（http://fancybox.net/howto），一个单独的网站上的教程（http://www.websitecodetutorials.com/code/jquery-plugins/jquery-fancybox.php），我试图浏览一些其他相关的帖子来检查常见问题（Basic "jquery fancybox"），（Fancybox not working），（FancyBox not working at all）。基本Fancybox实现

我觉得有一些简单的我可以忽略。在打电话给fancybox之前，我用CDN调用了jquery。我有一个链接到fancybox的css文件。我曾尝试将脚本调用移动到头部和身体标签内部的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

任何帮助是极大的赞赏。谢谢！

来源

2017-03-21 Lothar

控制台中的任何错误？ –

我应该考虑看看。是的，它确实显示了一个错误：jquery.fancybox.js：2659 Uncaught TypeError：$（...）。on不是函数 at jquery.fancybox.js：2659 at jquery.fancybox.js：2661 – Lothar

Are you使用最新版本的jQuery？ –

在这些情况下，您应该始终关注任何线索的开发人员控制台。在你的情况下，消息说：

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

这是什么意思是该函数“on”不存在。 jQuery的文档 - http://api.jquery.com/on/ - 说

version added: 1.7

那么，你就需要jQuery的版本比1.7更高，使其工作。

来源

2017-03-21 19:41:29 Janis

问题是我正在使用jquery v1.4（类似于fancybox网站上的指南）。改变这个jquery 3.1.1修复了这个问题。

来源

2017-03-21 18:44:00 Lothar

基本Fancybox实现

回答

相关问题