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.
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.
Share Improve this question asked Jul 24, 2011 at 1:15 L84L84 46.3k59 gold badges181 silver badges259 bronze badges 1- The only way to be sure you have all of Jquery and the required libraries loaded to do something like this is to draw your lightbox as soon as the 'ready' event is fired. Images will load behind the lightbox, but the page will be fully loaded. Unless you re-architect your site, to load partials via ajax requests, it will be very difficult to have the lightbox be present while HTML document content (not images, etc) actually loads. – KyleWpppd Commented Jul 24, 2011 at 16:29
4 Answers
Reset to default 2I would remend 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!
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" ...
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./page-to-display.html"
id="autostart">something here maybe ... or not</a>
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!