jquery - Fancybox:想要使用与/anchor 不同的元素

Question

我想使用 Fancybox 预览我网站上的图像，这比一桶图像稍微复杂一些。我想将 Fancybox 应用于 div 而不是 a/anchor，并使用其他一些属性来分配图像 URL。这在 Fancybox 中可能吗？

我想要的格式是，例如:

<div fancyimage="URL" class="fancybox">
    <img src="THUMB" />
    <a href="STANDARD IMAGE LINK">CAPTION</a>
<div>

这样，如果用户没有启用 Javascript(或者存在错误等)，他们仍然能够访问图像。提前致谢。

Answer 1

您可以使用 fancybox 的 data-fancybox-* 属性将 fancybox 绑定(bind)到除 anchor (下例中的 div)之外的任何元素，例如

<div class="fancybox" data-fancybox-href="http://fancyapps.com/" data-fancybox-type="iframe" data-fancybox-group="gallery">
    <img src='http://fancyapps.com/fancybox/demo/1_s.jpg' />
</div>
<div class="fancybox" data-fancybox-href="http://fancyapps.com/fancybox/demo/2_b.jpg" data-fancybox-type="image" data-fancybox-group="gallery">
    <img src='http://fancyapps.com/fancybox/demo/2_s.jpg' />
</div>

并使用一个没有任何回调的简单脚本，例如:

$(".fancybox").fancybox();

参见JSFIDDLE