在页面加载时启动灯箱答案

【问题标题】：Start a Lightbox on Page Load在页面加载时启动灯箱
【发布时间】：2011-07-24 01:15:13
【问题描述】：

不知道具体怎么做，因为我不擅长 Javascript。

这是我想做的：一个人在页面打开后立即进入页面，灯箱会在页面加载任何其他内容之前自动打开。然后，此人将阅读灯箱中的信息，并有一些关于他们希望如何进行的选项。当他们阅读此信息时，页面的其余部分将在后台加载。

我该怎么做呢？

谢谢！

注意：我正在为我的灯箱使用 Fancybox。

【问题讨论】：

确保您已加载所有 Jquery 和所需库以执行此类操作的唯一方法是在触发 'ready' 事件后立即绘制您的灯箱。图像将在灯箱后面加载，但页面将完全加载。除非您重新设计您的网站，以通过 ajax 请求加载部分内容，否则很难在实际加载 HTML 文档内容（不是图像等）时显示灯箱。

标签： javascript jquery jquery-plugins fancybox lightbox

【解决方案1】：

我会推荐 prettyPhoto，我有一个很酷的 API，可以让你从 javascript 打开灯箱。

按照 API 文档 here，您可以执行以下操作以使用 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>

在这个问题中查看我的笔记：

jquery lightbox plugin: Bug on IE7 and IE8!

【讨论】：

谢谢，我看过了，但正如我在上面的帖子中提到的，我在 JS 方面并不擅长。你能给我一个在页面启动后立即启动灯箱的例子吗？
我尝试了您的示例，但没有成功。它还破坏了页面本身（主图像下方应显示一些框）这是我所指的页面：ubhape2.com/home2.html
你需要添加 $j().prettyPhoto();在第一行之前。有关 API 的所有详细信息，请参阅网站文档。 - 我在你的页面上试过了，效果很好！

【解决方案2】：

这类似于 Lynda 的方法，在这里也可以正常工作：

<script type="text/javascript">
//<![CDATA[

<!-- show Lightbox Image Details instantly on page load -->
$(document).ready(function()
{
    $('#YourImageId').trigger('click');
}); 

//]]>   
</script>

...

<img id="YourImageId" ...

【讨论】：

【解决方案3】：

我在问了这个问题后发现了这个，但我会在这里为其他人发布 =>

以下脚本适用于 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>

【讨论】：

【解决方案4】：

如果您确实想在任何时候继续使用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>

我就是这样管理它的。即使您不使用fancybox，也很有用！

【讨论】：