如何在页面加载时启动 jQuery Fancybox？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/807271/
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
How to launch jQuery Fancybox on page load?
提问by Blegger
I would like to launch a Fancybox (e.g. Fancybox'sversion of a modal or light box) on page load. I could bind it to a hidden anchor tag and fire the click event of that anchor tag via JavaScript, but I would rather just launch the Fancybox directly and avoid the extra anchor tag.
我想在页面加载时启动一个 Fancybox（例如Fancybox 的模式或灯箱版本）。我可以将它绑定到一个隐藏的锚标签并通过 JavaScript 触发该锚标签的点击事件，但我宁愿直接启动 Fancybox 并避免额外的锚标签。
回答by Blegger
Fancybox currently does not directly support a way to automatically launch. The work around I was able to get working is creating a hidden anchor tag and triggering it's click event. Make sure your call to trigger the click event is included after the jQuery and Fancybox JS files are included. The code I used is as follows:
Fancybox 目前不直接支持自动启动的方式。我能够开始工作的工作是创建一个隐藏的锚标记并触发它的点击事件。确保在包含 jQuery 和 Fancybox JS 文件之后包含触发单击事件的调用。我使用的代码如下：
This sample script is embedded directly in the HTML, but it could also be included in a JS file.
此示例脚本直接嵌入在 HTML 中，但也可以包含在 JS 文件中。
<script type="text/javascript">
$(document).ready(function() {
$("#hidden_link").fancybox().trigger('click');
});
</script>
回答by JordanC
I got this to work by calling this function in document ready:
我通过在文档就绪中调用此函数来实现此目的：
$(document).ready(function () {
$.fancybox({
'width': '40%',
'height': '40%',
'autoScale': true,
'transitionIn': 'fade',
'transitionOut': 'fade',
'type': 'iframe',
'href': 'http://www.example.com'
});
});
回答by Hisham Muneer
Its simple:
这很简单：
Make your element hidden first like this:
像这样先隐藏你的元素：
<div id="hidden" style="display:none;">
Hi this is hidden
</div>
Then call your javascript:
然后调用你的javascript：
<script type="text/javascript">
$(document).ready(function() {
$.fancybox("#hidden");
});
</script>
Check out the image below:
看看下面的图片：
Another example:
另一个例子：
<div id="example2" style="display:none;">
<img src="http://theinstitute.ieee.org/img/07tiProductsandServicesiStockphoto-1311258460873.jpg" />
</div>
<script type="text/javascript">
$(document).ready(function() {
$.fancybox("#example2");
});
</script>
回答by Chris S
Window.load (as opposed to document.ready()) appears to the be the trick used in the JSFiddler onload demos of Fancybox 2.0:
Window.load（与 document.ready() 相反）似乎是 Fancybox 2.0的JSFiddler onload 演示中使用的技巧：
$(window).load(function()
{
$.fancybox("test");
});
Bare in mind you may be using document.ready() elsewhere, and IE9 gets upset with the load order of the two. This leaves you with two options: change everything to window.load or use a setTimer().
请记住，您可能在其他地方使用 document.ready()，而 IE9 对两者的加载顺序感到不安。这让您有两个选择：将所有内容更改为 window.load 或使用 setTimer()。
回答by Chris S
Or use this in the JS file after your fancybox is set up:
或者在你的fancybox设置后在JS文件中使用它：
$('#link_id').trigger('click');
I believe Fancybox 1.2.1 will use default options otherwise from my testing when I needed to do this.
我相信 Fancybox 1.2.1 会在我需要这样做时使用我的测试中的默认选项。
回答by Thomas
why isn't this one of the answers yet?:
为什么这还不是答案之一？：
$("#manual2").click(function() {
$.fancybox([
'http://farm5.static.flickr.com/4044/4286199901_33844563eb.jpg',
'http://farm3.static.flickr.com/2687/4220681515_cc4f42d6b9.jpg',
{
'href' : 'http://farm5.static.flickr.com/4005/4213562882_851e92f326.jpg',
'title' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
}
], {
'padding' : 0,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'image',
'changeFade' : 0
});
});
now just trigger your link!!
现在只需触发您的链接！
got this from the Fancybox homepage
从Fancybox 主页得到这个
回答by arena-ru
The best way I've found is:
我发现的最好方法是：
<script type="text/javascript">
$(document).ready(function() {
$.fancybox(
$("#WRAPPER_FOR_hidden_div_with_content_to_show").html(), //fancybox works perfect with hidden divs
{
//fancybox options
}
);
});
</script>
回答by CMen
For my case, the following can work successfully. When the page is loaded, the lightbox is pop-up immediately.
对于我的情况，以下可以成功工作。当页面加载时，灯箱立即弹出。
JQuery: 1.4.2
jQuery：1.4.2
Fancybox: 1.3.1
花式盒：1.3.1
<body onload="$('#aLink').trigger('click');">
<a id="aLink" href="http://www.google.com" >Link</a></body>
<script type="text/javascript">
$(document).ready(function() {
$("#aLink").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
</script>
回答by Andrew Scott Kimrey
Alex's answer is great. but It is importanting to note that that calls the default fancybox style. If you have your own custom rules, you should just call .trigger click on that specific anchor
亚历克斯的回答很棒。但重要的是要注意，这会调用默认的fancybox 样式。如果您有自己的自定义规则，您应该只调用 .trigger 单击该特定锚点
$(document).ready(function() {
$("#hidden_link").fancybox({
'padding': 0,
'cyclic': true,
'width': 625,
'height': 350,
'padding': 0,
'margin': 0,
'speedIn': 300,
'speedOut': 300,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'easingIn': 'swing',
'easingOut': 'swing',
'titleShow' : false
});
$("#hidden_link").trigger('click');
});
回答by Capsule
I actually managed to trigger a fancyBox link only from an external JS file using the "live" event:
我实际上设法使用“live”事件仅从外部JS文件触发fancyBox链接：
First, add the live click event on your future dynamic anchor:
首先，在您未来的动态锚点上添加实时点击事件：
$('a.pub').live('click', function() {
$(this).fancybox(... fancybox parameters ...);
})
Then, append the anchor to the body:
然后，将锚点附加到主体：
$('body').append('<a class="iframe pub" href="your-url.html"></a>');
Then trigger the fancyBox by "clicking" the anchor:
然后通过“点击”锚点触发fancyBox：
$('a.pub').click();
The fancyBox link is now "almost" ready. Why "almost" ? Because it looks like you need to add some delay before trigger the second click, otherwise the script is not ready.
FantasyBox 链接现在“几乎”准备好了。为什么是“几乎”？因为看起来你需要在触发第二次点击之前添加一些延迟，否则脚本还没有准备好。
It's a quick and dirty delay using some animation on our anchor but it works well:
在我们的锚点上使用一些动画是一个快速而肮脏的延迟，但效果很好：
$('a.pub').slideDown('fast', function() {
$('a.pub').click();
});
Here you go, your fancyBox should appears onload!
在这里，您的fancyBox 应该会出现在加载中！
HTH
HTH
