当前位置：文江博客话题详情

在页面加载时启动灯箱

发布于 2024-11-25 22:17:50 字数 212 浏览 0 评论 0原文

不知道具体如何做到这一点，因为我不太擅长 Javascript。

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

我该怎么做呢？

谢谢！

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

呆头 2024-12-02 22:17:50

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

请遵循此处的 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>

请参阅我在这个问题中的注释：

jquery lightbox 插件：IE7 和 IE8 上的错误！

I would recommend prettyPhoto, I has a cool API that allows you to open the lightbox from javascript.

Following the API documentation here you can do something like this to launch lightbox on load using 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:

jquery lightbox plugin: Bug on IE7 and IE8!

回复收藏 0 原文

那伤。 2024-12-02 22:17:50

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

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

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

//]]>   
</script>

...

<img id="YourImageId" ...

This is similar to Lynda's approach and also works fine here:

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

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

//]]>   
</script>

...

<img id="YourImageId" ...

回复收藏 0 原文

伊面 2024-12-02 22:17:50

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

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

I found this after I asked this question but I will post it here for others =>

the script below is for 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>

回复收藏 0 原文

拒绝两难 2024-12-02 22:17:50

如果您确实想随时继续使用 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，了解这一点也很有用！

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:

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

回复收藏 0 原文

~没有更多了~