In BlogPost, Javascript

How to Implement jQuery Colorbox

 

 

 

What is jQuery Colorbox?

jQuery Colorbox is a lightbox plugin that supports “photos, grouping, slideshow, ajax, inline, and iframed content.” In a nutshell, you can create nice looking popup boxes to display pictures and text.

What did I do with it?

In my particular use case, I had an HTML/CSS webpage (with some Javascript thrown in) that needed a popup that met the following conditions:

  1. If a user visited the webpage and didn’t click a checkbox in the colorbox that said “Don’t show again”, then the colorbox would keep appearing everytime they visited.
  2. If a user visited the webpage clicked the checkbox that said “Don’t show again”, then the colorbox would no longer appear ever again (actually, I set an expiration date of 10 years, but more on this later).
  3. The popup also had to be a certain color.

The following steps tell you how to implement the colorbox.

Step 1 – Add some custom styling

To change the colorbox styling, I modified the colorbox.css file from the example1 folder of the colorbox plugin. Essentially, I removed the background images and used background colors instead.


#cboxTopLeft{width:5px; height:5px; background: #990000 no-repeat -101px 0;}
#cboxTopRight{width:5px; height:5px; background: #990000 no-repeat -130px 0;}
#cboxBottomLeft{width:5px; height:5px; background: #990000 no-repeat -101px -29px;}
#cboxBottomRight{width:5px; height:5px; background: #990000 no-repeat -130px -29px;}
#cboxMiddleLeft{width:5px; background: #990000 left top repeat-y;}
#cboxMiddleRight{width:5px; background: #990000 right top repeat-y;}
#cboxTopCenter{height:5px; background: #990000 0 0 repeat-x;}
#cboxBottomCenter{height:5px; background: #990000 0 -29px repeat-x;}

Step 2 – Add the inline div

 

 

Step 3 – Add the jQuery code

There are 3 different things going on:

  1. The function check_cookie() checks to see if a cookie of a certain name has been set. If it has, then it returns true, otherwise it returns false.
  2. The $(‘#display_permission’).change() function checkts to see if the checkbox in the colorbox has been checked. If it has, then it sets a cookie by the name of no_overlay_display to expire 10 years from now.
  3. Finally, $(“ul#roles li”).click(), checks to see if it’s a user’s first browser session and a cookie has not been set. If both those conditions are true, then it will open a colorbox for several seconds before closing it, allowing the user to check a checkbox if they don’t want to see the colorbox again (or 10 years, since that’s what the expiration time is set to in the cookie). You’ll also notice I fade the colorbox in with the jQuery fadeIn() method and fade it out with the fadeOut() method.


function check_cookie(cname) {
var dc = document.cookie;
var exists = false;
var exists_index = dc.indexOf(cname);
if (exists_index >=0) {
exists = true;
}
return exists;
}

$(‘#display_permission’).change(function(e){
var checkit = this.checked;
if (checkit) {
var now = new Date();
var time = now.getTime();
var expireTime = time + 315569259747; //expire 10 years from now
now.setTime(expireTime);
document.cookie = ‘cookie=no_overlay_display;expires=’+now.toGMTString()+’;path=/’;
setTimeout($.colorbox.remove, 500); //wait 1/2 sec before destroying colorbox
}
});

var max_sessions = 0;
$(“ul#roles li”).click(function(e)
{
if (!check_cookie(“no_overlay_display”)&&max_sessions<1) {
max_sessions++;
$.colorbox({
left: “30%”,
width: “200px”,
height: “150px”,
inline: true,
href:”#overlay_display”,
overlayClose: true,
transition: “none”,
onLoad: function ()
{
$(‘#overlay_display’).fadeIn();
setTimeout($.colorbox.close, 7000);
},
onClosed: function ()
{
$(‘#overlay_display’).fadeOut();
}
});
} //end if
});

Step 4 – Don’t forget to link to the stylesheet and javascript files in your main webpage




Recent Posts