Integrating ColorBox and loupe JQuery plugins

2012-04-20

JavaScript

When I wanted to preview a sequence of large images, I decided to go for a lightbox plugin, but I also wanted a better way to see the fine details than having to open the full image.

ColorBox is my favorite lightbox plugin; it’s highly customizable, comes with multiple themes, and still manages to be quite small!

When it comes to large images, it has two options: either show a scaled down version, or use scrollbars; while I prefer the scaled down version, I find it annoying to open the full version and then scroll to the area of interest, so I decided to use the loupe plugin.

So, how to integrate them? First of all, I found out that hte loupe plugin was not setting the z-index CSS property (which ColorBox sets to “9999”), so the CSS needs a change in order to make the loupe stay on top:

/* loupe style - it's important to include the z-index:10000 to overlay over colorbox! */
.loupe { z-index: 10000; background-color:#555; background:rgba(0, 0, 0, 0.25); border:5px solid rgba(0, 0, 0, 0); cursor:url(blank.png), url(blank.cur), none; }

Then, the JavaScript call to ColorBox can be done as follows:

$(".group").colorbox({rel:'group', transition:"none",
    onComplete:function(){
      var image = $('#cboxLoadedContent .cboxPhoto').get(0);
      $("<img/>") // Make in memory copy of image to avoid css issues
          .attr("src", $(image).attr("src"))
          .load(function() {
              if ((this.width > image.width) || (this.height > image.height)) {
                $(image).loupe();
              }
          });
    },
    onCleanup:function(){ $('.loupe').remove(); } }
  );

Why the extra image creation? It’s the only crossbrowser way to retrieve the image’s original width and height (in Firefox the naturalWidth and naturalHeight properties can be used, but they aren’t standard); the good thing is that the image will be in cache, so it won’t be loaded twice.

See it in action here.

Contents