4

我已按照说明进行操作，但 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 目录中，并且只包含两个引用的文件。我想知道这是否与它有关，我是否应该复制源文件夹并将所有内容保存在那里。

4

2 回答 2

24

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

改变：

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

至：

$(".fancybox").fancybox({
   openEffect  : "fade",
   closeEffect : "fade",
   type : "image"
});
于 2014-02-06T09:43:50.713 回答
5

我发现了自己的错误：

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

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

它应该是这样的

href="image.png"
于 2013-09-23T00:15:02.560 回答