JQuery Fancybox 不工作

Question

我已按照说明进行操作，但 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>

JS

main.js(文档内部就绪):

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

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

Answer 1

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

改变:

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

到:

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