FANCYBOX添加链接到弹出图像

Question

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

我当前的代码：

html：

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

jQuery：

<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>），否则您只是在向您的HTML代码中添加额外的开销页面加载，所以应该足够：

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

第二，要添加链接到已经在Fancybox中打开的图像，您可以在Fancybox的onComplete回调中使用.wrap()方法：

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

NOTE ：这是适用于Fancybox V1.3.4

Answer 2

fancybox更新了其插件。@jfk的方式在较旧版本中运行良好，但是int版本2.1.5您需要更改简单的方法。

sisteatd使用onComplete，您必须使用afterShow。

然后，最终代码是：

1）隐藏链接

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

2）JS

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

这个对我来说很好。

Answer 3

您可以强制内容（添加链接）在Fancybox API（http://fancybox.net/api）中检查高级选项"内容"

在这里进行：

 $("#hidden_link").click(function () {
     $.fancybox.open({
         height: '100',
         padding: 5,
         content: '<P>Just a test</P>'
     });
 });

问：

丹尼尔

Answer 4

尝试以下：

jQuery：

var popup_link = '<a id='popup_link' href='www.example.com/example'></a>';

$('.fancybox-inner').html(popup_link);

CSS：

#popup_link { position: absolute; width: 100%; height: 100%; display: block;}