Load FancyBox popup only once per session when browse SharePoint site

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 look like the following

AD

Steps:

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

masterpage

  • Click Master Page, in this case it is V4.master.

setmasterpage

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

stylelibraby

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

uploadfancyboxfile

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

checkin

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

copynewversionfromyourmaster

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

editinadvancedmode

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

updatemasterpage

<!-- Add jQuery library -->
http://../../../Style%20Library/JS/JQuery/jquery-1.4.3.min.js
<!-- Add fancyBox -->
<link rel="stylesheet" href="../../../Style Library/JS/fancybox
/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
http://../../../Style%20Library/JS/fancybox/jquery.fancybox-1.3.4.pack.js
http://../../../Style%20Library/JS/fancybox/jquery.mousewheel-3.0.4.pack.js
<!-- Add HQuery Cookie -->
http://../../../Style%20Library/JS/JQuery/jquery.cookie.js
  • Pick your URL based on your location that you upload FancyBox and JQuery files.

pike

  • 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.
<a id="yt" style="display:none" href="../../../Style Library/
Images/AdForUpdate.jpg"></a>
  • Check-in your Master Page as Major Version.

checkinmasterpage

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

publishasmajor

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

masterpage

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

selectnewmasterpage

  • Apply this master page to all subsites.

applumasterpagetoallsubsite

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

AD

Enjoy 🙂

Advertisements

One thought on “Load FancyBox popup only once per session when browse SharePoint site

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s