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:
- 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.
- 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).
- 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
<div id="overlay_display" style="display: none;">
<div style="font-style: italic; color: #666; padding: 10px 10px 10px 10px;">
<p style="font-size: 120%;">
Check "who you are" and "your responsibilities" to view a more complete list.
</p>
<p>
</p>
<p>
<input id="display_permission" name="display_permission" type="checkbox" value="true" />Don't show anymore.
</p>
</div>
</div>Step 3 – Add the jQuery code
There are 3 different things going on:
- 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.
- 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.
- 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();
}
});
}
});