javascript - Fancybox 将链接添加到弹出图像

Question

我在页面加载时有一个显示图像的弹出窗口，当单击它关闭的某个地方时。我希望弹出窗口成为转到另一页的链接。有什么想法吗？

我当前的代码:

HTML:

<a id="hidden_link" href="image.jpg" style="visibility:hidden;"><img src="image.jpg")</a>

J查询:

<script type="text/javascript">
$(document).ready(function() {                        
$("#hidden_link").fancybox().trigger('click');
});
</script>    

此 Jquery 触发一个隐藏链接，因此 fancybox 显示。有没有办法添加指向 image.jpg 的链接？

使用 fancybox 1.3.4

Answer 1

首先，如果您要隐藏元素 ( visibility:hidden )，则不需要在 html 代码中使用缩略图 ( <img> )，否则您只是在页面加载中增加了额外的开销，所以这应该足够了:

<a id="hidden_link" href="image.jpg" style="visibility:hidden;"></a>

其次，要添加指向已在 fancybox 中打开的图像的链接，您可以使用 .wrap() fancybox 中的方法 onComplete像这样的回调:

jQuery(document).ready(function ($) {
    $("#hidden_link").fancybox({
        onComplete: function () {
            $("#fancybox-img").wrap($("<a />", {
                // set anchor attributes
                href: this.href, //or your target link
                target: "_blank" // optional
            }));
        }
    }).trigger("click");
});

参见 JSFIDDLE

注意:这是针对fancybox v1.3.4