Question

我不确定如何做到这一点，因为我在Javascript上并不是那么棒。

以下是我想要做的事情：当页面打开时，一个人会在页面加载任何其他内容之前自动打开灯箱。然后，该人将阅读灯箱中的信息，并提供一些关于他们如何进行的选项。当他们阅读此信息时，页面的其余部分将在后台加载。

我该怎么做呢？

谢谢！

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

Answer 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!

Answer 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" ...

Answer 3

如果你确实想在任何时候继续使用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也很有用！

Answer 4

在我提出这个问题之后我发现了这个问题，但我会在这里发布其他人=＆gt;

以下脚本适用于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 个答案: