单击带有 link 的弹出图像时如何关闭 FancyBox？

Question

我有一个 FancyBox，当点击弹出的图片时会打开 link：

$(".fancybox").fancybox({
    afterShow: function () {
        $(".fancybox-image").wrap("<a href='"+$(this.element).attr('name')+"' target='_blank' />");
    }
});

现在，我想在点击照片时关闭 FancyBox，所以我添加 closeClick:

$(".fancybox").fancybox({
    closeClick: true,
    afterShow: function () {
        $(".fancybox-image").wrap("<a href='"+$(this.element).attr('name')+"' target='_blank' />");
    }
});

这行不通。 link 可以正常打开，但 FancyBox 无法关闭。

如果我删除 aftershow FancyBox 关闭就好了。

那么怎样才能一键两全呢？

Answer 1

您可以 将多个 jQuery 方法链接到同一个选择器，因此在 .wrap() 之后您可以链接一个 .on() 方法绑定将触发 $.fancybox.close() public 方法的 click 事件 ，例如：

jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        // API options
        afterShow: function () {
            $(".fancybox-image")
            // first method
            .wrap("<a href='" + $(this.element).attr('name') + "' target='_blank' />")
            // second method
            .on("click", function () {
                $.fancybox.close(true);
            });
        }
    }); // fancybox
}); // ready

见JSFIDDLE