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.
$(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.
