How to Load Fancybox on Page Load - jQuery Fancybox

by Admin 26. January 2013 19:24

Versions of Fancybox Plugin:

If you are  a web designer you probably have already used jQuery fancybox plugin. Remember that there might be different versions available starting with 1.0, 1.2,  1.2.1, 1.2.2 and all the way upto 2.1.4 . If you would like to see the change log click here. So if you are trying to attempt something in 1.0, it might not work if you are reading the documentation for 1.3.4 or 2.0. 

Show Fancybox Pop-Up on Page Load:

The most common way of using fancybox is that you click on a link and show some content as a fancybox pop up. But sometimes you might find yourself in a situation when you want to load the fancybox on page load. So how do you achieve this? Actually it's pretty simple.

Javascript Code:

$(document).ready(function(){

    var message = $('#message').css('display','block');
 
    $.fancybox({content:message}); 
//I have tested the above with version 1.3.4

})

If you are using one of the later versions the only the following might be sufficient.

var message = $('#message');
 
$.fancybox(message);

And below is the HTML code:

HTML Code:

<div id="message" style="display:none;">
     <h2>Welcome to our website!</h2>
</div>

So if you are loading a pop on page load, you probably want to show some sort of a message. In my case you can see the above html code, you can have the div within the page before the end body tag or after the start body tag. By default you will hide the div container with css and then when the page loads you call the $.fancybox() function and pass the variable that holds the message div object. Pretty easy!

If you need a new website or need help maintaining your current website contact FMR Web Design in Boca Raton, Palm Beach Area

Tags: , ,

Web Design Tips

Pingbacks and trackbacks (2)+

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

© 2014 FMR Web Design Delray Beach, Florida | P: (561) 235-3775 | E: info@fmrwebdesign.com