Download the latest jQuery FancyBox package by jQuery FancyBox Website
1. Set the headers
The first thing to do is include the required files in the header of your page.
For the FancyBox, first the jQuery library, then the plugin script, and an additional style sheet files.
/* Include jQuery - try to use latest version */ <script type="text/javascript" src="your_path_to/jquery.js"></script> /* jQuery fancybox plugin */ <script type="text/javascript" src="your_path_to/jquery-fancybox.js"></script> /* Additional Style for fancybox */ <link href="your_path_to/fancybox.css" rel="stylesheet" type="text/css" />
2. Next step is to declare how and when the FancyBox will be displayed on your page.The below code tells that every link that has a class fancy box will have its content opened in a fancy box.
It can be added in the page header (as below) or in a separate (.js) file.
<script type="text/javascript">
$(document).ready(function(){
$(".fancybox").fancybox();
});
</script>
3. Finally, you just need to create a link whose class will have to be fancy box (as you have declared in fancybox function) and whose href attribute will need to contain the path of the page/element you wish to open within the fancy box.
<a href="page_target_path" class="fancybox">How's it!!</a>
I found that if the picture or content in FancyBox is large then the fancybox bottom shows the original background instead of overlay.
Here is the solution of the same.
In fancybox.css file you just need to change is – #fancybox-overlay from position:absolute to position:fixed.
#fancybox-overlay {
/*position: absolute;*/
position: fixed;