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绑定到锚之外的任何元素（下例中为div），并使用fancybox的data-fancybox-*属性，例如

<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

Answer 2

嗯，你可以做这样的事吗

<div data-fancyimage="http://fancyapps.com/fancybox/demo/2_b.jpg" 
     data-thumbnail="http://fancyapps.com/fancybox/demo/2_s.jpg" 
     class="fancybox">
         <a href='http://fancyapps.com/fancybox/demo/2_b.jpg'>
            <img src='http://fancyapps.com/fancybox/demo/2_s.jpg' />
         </a>
</div>

JS：

$("a").on("click", function(e) {
    e.preventDefault();
});

$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
    afterLoad: function () {
        this.content.find("img").attr("src", this.content.data("fancyimage"));
    },
    afterClose: function (current) {
        this.content.find("img").attr("src", this.content.data("thumbnail"));
        $(current.element).show();
    }
});

这是您可以查看的fiddle。

Fancybox：想要使用与/锚不同的元素

2 个答案: