Start a Lightbox on Page Load

Question

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.

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