我在页面加载时弹出一个显示图像的弹出窗口,点击它关闭的某个地方。我希望弹出窗口成为另一个页面的链接。有什么想法吗?
我目前的代码:
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
答案 0 :(得分:7)
首先,如果你隐藏了元素(visibility:hidden
),你不需要在你的html代码中使用缩略图(<img>
),否则你只需要额外增加你的开销页面加载所以这应该足够了:
<a id="hidden_link" href="image.jpg" style="visibility:hidden;"></a>
其次,要添加指向已在fancybox中打开的图片的链接,您可以在fancybox的.wrap()
回调中使用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
答案 1 :(得分:4)
Fancybox更新了他们的插件。 @JFK编写的方式在旧版本中运行良好,但在版本2.1.5中,您需要更改一个简单的方法。
使用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");
});
这对我来说很好。
答案 2 :(得分:1)
您可以强制内容(添加链接) 检查Fancybox API(http://fancybox.net/api)
中的高级选项“内容”这就是:
$("#hidden_link").click(function () {
$.fancybox.open({
height: '100',
padding: 5,
content: '<P>Just a test</P>'
});
});
此致
丹尼尔
答案 3 :(得分:0)
试试这个:
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;}