Start a Lightbox on Page Load

javascript jquery jquery-plugins fancybox lightbox

20,845

Solution 1

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!

Solution 2

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

Solution 3

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!

Solution 4

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>

View more solutions

20,845

Author by

L84

Enterprise System Professional

Updated on May 15, 2020

Comments

L84 almost 4 years

Not sure exactly how to do this since I am not that great at 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.
L84 almost 13 years

Thanks, I looked at it but as I mentioned in the above post I am not that great at JS. Can you give me an example of launching the lightbox as soon as the page launches?
L84 almost 13 years

I tried your example and it did not work. It also broke the page itself (there are boxes that should show below the main image) Here is the page I am referring to: ubhape2.com/home2.html
Mo Valipour almost 13 years

you need to add $j().prettyPhoto(); before in the first line. see website documentation for all details about the API. - I tried it on your page and it worked!