如何在单击带链接的弹出图像时关闭FancyBox？

I have a FancyBox, that opens a link when clicked on the popped up image:

我有一个FancyBox,当点击弹出的图像时会打开一个链接:

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

Now, I'd like to close the FancyBox when the photo is clicked so I add closeClick:

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

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

This doesn't work. The link opens fine, but the FancyBox doesn't close.

这不起作用。链接打开正常,但FancyBox没有关闭。

If I remove aftershow FancyBox closes just fine.

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

So how can both be achieved with a click?

那么如何通过点击实现这两个目标呢?

1 个解决方案

#1

You can chain several jQuery methods to the same selector, so after .wrap() you could chain an .on() method where you could bind a click event that would trigger the $.fancybox.close() public method, like :

你可以将几个jQuery方法链接到同一个选择器,所以在.wrap()之后你可以链接一个.on()方法,你可以绑定一个触发$ .fancybox.close()公共方法的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

See JSFIDDLE