Fancybox on Sharepoint Home

In this article I will elaborate How to show a fancybox popup in SharePoint.
In my Scenario:
I need to show a fancybox popup window only once per session when I open a SharePoint site for the first time.
I  checked the type of modal popup and found the FancyBox is fantastic popup that meet my requirement.

The Output should be as shown below:

Steps:
To achieve this Please follow the simple steps mentioned below:

• First check what’s your Custom Master Page that used in your site.
• Open your SharePoint site –> Site Action –> Site Setting –> Master Page.

• Click Master Page, now you know what’s the default master page for your SharePoint site in this case is V4.master.

• Open Style Library to upload FancyBox and JQuery files (You can download this files by click FancyBox & JQuery).

• Open library via windows explorer to copy the downloaded files.

• Don’t forget to check-in and publish all the uploaded files as Major version.

• Open SharePoint Designer –> Master Page –> Copy current master page in this page V4.master. (We recommend to take a copy of  your current Master Page).

• Rename the copied master page with an appropriate name in this case V4_Ad.master, edit Master Page in advanced mode.

• Add the reference to FancyBox, JQueryand CSS files in the Head Tag.

http://../../../Style%20Library/JS/JQuery/jquery-1.4.3.min.js


http://../../../Style%20Library/JS/fancybox/jquery.fancybox-1.3.4.pack.js
http://../../../Style%20Library/JS/fancybox/jquery.mousewheel-3.0.4.pack.js

http://../../../Style%20Library/JS/JQuery/jquery.cookie.js

• Pick your URL based on your location that you upload FancyBox and JQuery files.

• Add the following code in Head Tag too.

function openFancybox() {
setTimeout(function () {
$('#yt').trigger('click');
}, 500);
};
$(document).ready(function () {
var visited = $.cookie('visited');
if (visited == 'yes') {
return false; // second page load, cookie active
} else {
openFancybox(); // first page load, launch fancybox
}
$.cookie('visited', 'yes', {
expires: 7 // the number of days cookie will be effective
});
$("#yt").click(function () {
$.fancybox({
href: this.href,
type: "image",
transitionIn: "elastic",
transitionOut: "elastic"
});
return false;
});
});

• Add the following code in Body Tag.

• Check-in your Master Page as Major Version.

• The following dialog will be shown to publish your Master Page as Major Version.

• Open your site –> Site Action –> Site Settings –> Master Page

• Click Master Page and change your master page with the new Master Page.

• Apply this master page to all subsites.

• Try to browse your site you will note the popup window will be showed onload only once per session.

Note: If you need to show it when you load only a home page you can type the previous code in your home page layout.

Enjoy

PS: This article is part of this post.