Начать лайтбокс при загрузке страницы - PullRequest
Новая
       17

Начать лайтбокс при загрузке страницы

3 голосов
/ 24 июля 2011

Не уверен, как именно это сделать, так как я не очень хорош в Javascript.

Вот что я хотел бы сделать: человек переходит на страницу, как только страница открывается, автоматически открывается лайтбокс перед тем, как страница загружает любой другой контент. Затем человек прочитает информацию в лайтбоксе и предложит несколько вариантов действий. Пока они читают эту информацию, остальная часть страницы будет загружаться в фоновом режиме.

Как бы я поступил так?

Спасибо!

Примечание. Я использую Fancybox для своего лайтбокса.

Ответы [ 4 ]

2 голосов
/ 14 мая 2012

Это похоже на подход Линды, а также отлично работает здесь: 

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

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

//]]>   
</script>

...

<img id="YourImageId" ...
2 голосов
/ 24 июля 2011

Я бы порекомендовал 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: ошибка в IE7 и IE8!

1 голос
/ 04 августа 2011

Я нашел это после того, как задал этот вопрос, но я опубликую его здесь для других =>

скрипт ниже для 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>
1 голос
/ 01 августа 2011

Если вы хотите продолжить использовать 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!

...