Question

我一直试图让fancybox 2工作多年。

最终我已经到了在jsfiddle上尝试一个基本的例子。

我通过以下方式致电fancybox：

$(document).ready(function() { $(".fancybox").fancybox(); });

和html看起来像：

<a class="fancybox" rel="group" href="http://lorempixel.com/1000/500/"><img src="http://lorempixel.com/500/250/" alt="" /></a>

代码来自fancybox自己的网站，只是从lorempixel中抓取一些占位符图片。

我已将所需的fancybox css和js附加到小提琴上，并告诉它使用jquery 1.7.2

有人可以看看，让我知道我哪里出错了吗？让我疯狂的是，我甚至无法得到基本的例子。

You can find the fiddle here.

谢谢！

Answer 1

我不同意@DavidMuller ......问题不在于lorempixel.com服务。真正的问题是，fancybox无法从网址

中找出type内容

<a class="fancybox" rel="group" href="http://lorempixel.com/1000/500/"><img src="http://lorempixel.com/500/250/" alt="" /></a>

...因为它没有图片扩展名（jpg，png或gif）所以你必须告诉它是image。< / p>

您可以使用不同的选项来设置内容的type

1）。使用type API选项

$(document).ready(function() {
    $(".fancybox").fancybox({
        type: "image"
    });
});

<强> JSFIDDLE

2）。使用data-fancybox-type（HTML5）属性

<a class="fancybox" data-fancybox-type="image" rel="group" href="http://lorempixel.com/1000/500/"><img src="http://lorempixel.com/500/250/" alt="" /></a>

<强> JSFIDDLE

有关详细信息，请查看http://fancyapps.com/fancybox/#support常见问题解答标签，第5页

Answer 2

<强>＆LT;更新＆GT;

正如JFK在答案中所述，问题是fancybox无法确定内容类型，因为lorempixel-url没有扩展名。

<强>＆LT; /更新＆GT;

Phew，花了我很长时间来弄明白这一点。问题确实是“lorempixel.com”服务。我已经将小提琴更新为“真实”的形象并且瞧瞧;）。

<a class="fancybox" rel="group" href="http://farm9.staticflickr.com/8434/7786420744_8a1f692248_c.jpg"><img src="http://lorempixel.com/500/250/" alt="" /></a>
<a class="fancybox" rel="group" href="http://farm9.staticflickr.com/8434/7786420744_8a1f692248_c.jpg"><img src="http://lorempixel.com/500/250/" alt="" /></a>

http://jsfiddle.net/mnuRw/3/

Fancybox2不起作用

2 个答案: