javascript Fancybox 添加链接到弹出图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21579823/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fancybox add link to popup image
提问by rac
I have a popup on page load that displays a image, when clicking somewhere it closes. I want the popup to be a link that goes to another page. Any ideas?
我在页面加载时有一个弹出窗口，当点击它关闭的某个地方时，它会显示一个图像。我希望弹出窗口是一个链接到另一个页面。有任何想法吗？
My current code:
我目前的代码：
HTML:
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>
This Jquery triggers a hidden link so the fancybox shows. Is there a way to add a link to the image.jpg?
这个 Jquery 触发了一个隐藏的链接，所以fancybox 显示。有没有办法添加到 image.jpg 的链接？
using fancybox 1.3.4
使用fancybox 1.3.4
回答by JFK
First, if you are hiding the element (visibility:hidden), you don't need to use a thumbnail (<img>) in your html code, otherwise you are just adding an extra overhead to your page load so this should be enough :
首先，如果您要隐藏元素 ( visibility:hidden)，则不需要<img>在 html 代码中使用缩略图 ( )，否则您只会为页面加载增加额外的开销，因此这应该足够了：
<a id="hidden_link" href="image.jpg" style="visibility:hidden;"></a>
Second, to add a link to the image already opened in fancybox, you can use the .wrap()method within fancybox's onCompletecallback like this :
其次，要添加到已经在fancybox 中打开的图像的链接，您可以使用.wrap()fancyboxonComplete回调中的方法，如下所示：
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");
});
See JSFIDDLE
看 JSFIDDLE
NOTE: this is for fancybox v1.3.4
注意：这是用于fancybox v1.3.4
回答by Diego Somar
Fancybox updated their plugin. The way writted by @JFK works fine in older versions, but int the version 2.1.5 you need to change a simple method.
Fancybox 更新了他们的插件。@JFK 编写的方式在旧版本中工作正常，但在 2.1.5 版本中，您需要更改一个简单的方法。
Inseatd use onComplete, you have to use afterShow.
inseatd用onComplete，你得用afterShow。
Then, the final code is:
那么，最终的代码是：
1) The hidden link
1）隐藏链接
<a id="hidden_link" href="image.jpg" style="visibility:hidden;"></a>
2) The JS
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");
});
This work fine for me.
这对我来说很好。
回答by Daniel Alves
You can force the content (adding your link) Check for the advanced option "content" in Fancybox API (http://fancybox.net/api)
您可以强制内容（添加您的链接）检查 Fancybox API 中的高级选项“内容”（http://fancybox.net/api）
Here it goes:
它是这样的：
$("#hidden_link").click(function () {
$.fancybox.open({
height: '100',
padding: 5,
content: '<P>Just a test</P>'
});
});
Regards,
问候，
Daniel
丹尼尔
回答by cnkdmrzn
Try this:
试试这个：
jQuery :
jQuery ：
var popup_link = '<a id='popup_link' href='www.example.com/example'></a>';
var popup_link = '<a id='popup_link' href='www.example.com/example'></a>';
$('.fancybox-inner').html(popup_link);
$('.fancybox-inner').html(popup_link);
Css :
css :
#popup_link { position: absolute; width: 100%; height: 100%; display: block;}
#popup_link { position: absolute; width: 100%; height: 100%; display: block;}
