Javascript 在页面加载时启动灯箱
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6804365/
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
Start a Lightbox on Page Load
提问by L84
Not sure exactly how to do this since I am not that great at Javascript.
不确定如何做到这一点，因为我不太擅长 Javascript。
Here is what I would like to do: A person goes to a page as soon as the page opens a lightbox opens automatically BEFORE the page loads any other content. The person will then read the information in the lightbox and have an a few options on how they want to proceed. While they read this information the rest of the page will load in the background.
这是我想要做的：一个人在页面打开后立即转到页面，在页面加载任何其他内容之前自动打开灯箱。然后，此人将阅读灯箱中的信息，并有一些关于他们希望如何进行的选项。当他们阅读此信息时，页面的其余部分将在后台加载。
How would I go about doing this?
我该怎么做呢？
Thanks!
谢谢！
Note: I am using Fancybox for my lightbox.
注意：我的灯箱使用的是 Fancybox。
采纳答案by Mo Valipour
I would recommend prettyPhoto, I has a cool API that allows you to open the lightbox from javascript.
我会推荐prettyPhoto，我有一个很酷的API，可以让你从javascript打开灯箱。
Following the API documentation hereyou can do something like this to launch lightbox on load using JS:
按照此处的 API 文档，您可以执行以下操作以使用 JS 在加载时启动灯箱：
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$().prettyPhoto()
api_images = ['images/fullscreen/image1.jpg','images/fullscreen/image2.jpg','images/fullscreen/image3.jpg'];
api_titles = ['Title 1','Title 2','Title 3'];
api_descriptions = ['Description 1','Description 2','Description 3'];
$.prettyPhoto.open(api_images,api_titles,api_descriptions);
});
</script>
see my notes in this question:
在这个问题中看到我的笔记：
回答by sulai
This is similar to Lynda's approach and also works fine here:
这类似于 Lynda 的方法，在这里也可以正常工作：
<script type="text/javascript">
//<![CDATA[
<!-- show Lightbox Image Details instantly on page load -->
$(document).ready(function()
{
$('#YourImageId').trigger('click');
});
//]]>
</script>
...
<img id="YourImageId" ...
回答by Azirius
If you did want to continue using fancybox at any time then here is how I managed to get fancybox to open on page load:
如果您确实想在任何时候继续使用fancybox，那么这里是我设法让fancybox在页面加载时打开的方法：
<script type="text/javascript">
/*<![CDATA[*/
$(document).ready(function($)
{
$.fancybox({
autoScale: true,
autoDimensions: true,
transitionIn: 'fade',
transitionOut: 'fade',
scrolling: 'no',
centerOnScroll: true,
overlayShow: true,
content: $('#somediv').html(),
padding: 20
});
})(jQuery);
/*]]>*/
</script>
That's how I managed it. Useful to know even if you don't use fancybox!
我就是这样管理的。即使您不使用fancybox，也很有用！
回答by L84
I found this after I asked this question but I will post it here for others =>
我在问这个问题后发现了这个，但我会在这里发布给其他人=>
the script below is for v1.3.0
以下脚本适用于 v1.3.0
1) inline
<script type="text/javascript" >
$(document).ready(function(){
$("#autostart").fancybox({
'width': 640, //or whatever
'height': 400
});
}); // document ready
</script>
<body onload="$('#autostart').trigger('click');">
<a href="#mycontent" id="autostart">something here maybe</a>
<div style="display: none">
<p id="mycontent">I want to display this</p>
</div>
1) external html page:
<script type="text/javascript" >
$(document).ready(function(){
$("#autostart").fancybox({
'width': 640, //or whatever
'height': 400.
'type': 'iframe' // see this?
});
}); // document ready
</script>
<body onload="$('#autostart').trigger('click');">
<a href="http://domain.com/page-to-display.html"
id="autostart">something here maybe ... or not</a>
