javascript - Fancybox2 不工作

Answer 1

我不得不不同意@DavidMuller ...问题不在于lorempixel.com服务。type真正的问题是，fancybox 无法从 url 中找出内容

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

...因为它没有图像扩展名（或者jpg，png或gif）所以你必须告诉它是一个image.

您有不同的选项来设置type内容

1）。使用typeAPI 选项

$(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

<更新>

正如 JFK 在他的回答中所说，问题在于 fancybox 无法确定内容类型，因为 lorempixel-url 上没有扩展名。

</更新>

呼，我花了很长时间才弄清楚这一点。问题确实是“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>

​</p>

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