Question

我经常使用<a>标记href来调用fancybox。现在，我正在考虑使用div点击打开fancybox（ver1）。

<div id="content"></div>

这可能吗？

Answer 1

可以使用（HTML5）<a>属性将除data-fanncybox-*标记之外的任何元素绑定到fancybox（v2.x）。

不幸的是，data-fanncybox-*属性不是 fancybox v1.3.x 的选项，但您仍然可以使用标准data-*属性<div>回调中的onStart和 extend fancybox（v1.3.x）功能。

因此，假设您要从div调用fancybox：

<div class="fancybox" data-href="image.jpg">This DIV should open fancybox</div>

注意 data-href属性会告诉fancybox它应该从哪里获取内容（类似于href标记的<a>属性）

然后，您可以使用此脚本：

$(".fancybox").fancybox({
    type: "image",
    onStart: function (el, index) {
        var thisElement = $(el[index]);
        $.extend(this, {
            href: thisElement.data("href")
        });
    }
});

参见 JSFIDDLE

另一方面，使用<a> 以外的元素构建fancybox（v1.3.x）图库并不是就像添加rel属性一样简单<div>元素，因为它会触发js错误。

作为一种解决方法，您可以在脚本中手动构建库。您可以使用.each()方法执行此操作，例如：

var gallery = [];
jQuery(document).ready(function ($) {
    $(".fancybox").each(function (i) {
        gallery[i] = {
            href: $(this).data("href"),
            title : "image "+ (i+1)
        };
        $(this).on("click", function () {
            $.fancybox(gallery, {
                // API v1.3.x options here
                type: "image",
                index: i, // IMPORTANT to open from clicked div
                cyclic: true
            }); // fancybox
            return false;
        }); // on
    }); // each
}); // ready

参见 JSFIDDLE

备注：

此解决方案适用于fancybox v1.3.x

.on()需要jQuery 1.7 +

单击div时打开fancybox

1 个答案: