JQuery Fancybox 不工作答案

【问题标题】：JQuery Fancybox not workingJQuery Fancybox 不工作
【发布时间】：2013-09-22 23:09:31
【问题描述】：

我已按照说明进行操作，但 Fancybox 无法正常工作。我想我需要一些额外的眼睛来告诉我我做错了什么。

有什么想法吗？

HTML

代码：

<h1><a id="v" class= "letter fancybox" data-fancybox-group="group" href="http://placekitten.com/500/500">V</a></h1>

参考文献：

CSS（页面顶部）：

<link rel="stylesheet" href="home/css/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />

JS（页面底部，包括其他js）：

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

<!-- FancyBox -->
<script type="text/javascript" src="home/js/jquery.fancybox.pack.js?v=2.1.5"></script>

main.js（内部文档就绪）：

$(".fancybox").fancybox({
    openEffect  : 'fade',
    closeEffect : 'fade'
});

我想我还应该提到我没有将整个项目放在一个文件夹中。我将 .css 和 .js 文件放在单独的 CSS 和 JS 目录中，并且只包含两个引用的文件。我想知道这是否与它有关，我是否应该复制源文件夹并将所有内容保留在其中。

【问题讨论】：

你的脚本标签快把我逼疯了。你如何决定是否要使用 type 属性？
@BillCriswell 哈哈，是的，我只是在想这个。我宁愿不包括它们。他们有什么理由需要在那里？
@BillCriswell 我刚刚查了一下。看起来 HTML5 中不再需要 type 属性，但它曾经是。
如果您使用的是 HTML5，那就没有理由了。
啊，同时回复了。是的，没必要！

标签： jquery html css fancybox-2

【解决方案1】：

您应该在 Fancybox 的配置中添加 type 字段。 Fancybox 尝试检测内容的类型，但是当您 href 到例如生成图像的php脚本，Fancybox有时无法识别内容类型。

变化：

$(".fancybox").fancybox({
   openEffect  : 'fade',
   closeEffect : 'fade'
});

到：

$(".fancybox").fancybox({
   openEffect  : "fade",
   closeEffect : "fade",
   type : "image"
});

【讨论】：

【解决方案2】：

我发现了自己的错误：

我的问题是我在我的代码中引用了一个网站（即使它创建了一个图像）：

<h1><a id="v" class= "letter fancybox" data-fancybox-group="group" href="http://placekitten.com/500/500">V</a></h1>

应该是这样的

href="image.png"

【讨论】：

@JFK 谢谢！该答案将允许我现在包含 placekitten 链接。我很感激这些信息。
这对我有用。我使用的是 bit.ly 链接而不是带有 .jpg / .png 扩展名的 url。小细节，但很容易被忽视。谢谢！