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 */
/* jQuery fancybox plugin */
/* 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.
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>