BinaryWebPark

How to Implement jQuery Colorbox

October 04, 2014

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

<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>
      &nbsp;
    </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:

  1. The function checkcookie()_ 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 $(‘#displaypermission’).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 nooverlaydisplay 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();
    }
  });
  }
});

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