Image Protector Plugin for jQuery

I’ve always been curious about the jQuery JavaScript library. jQuery has captured the hearts of web designers and developers everywhere and I’ve always wondered why. I’ve been told it’s easy, which is probably why designers were so quick to adopt it NOT that designers aren’t intelligent, but designers usually have enough design stuff to worry about and if they wanted to be programmers, they would’ve become programmers. jQuery being easy didn’t convince me to try jQuery because Moo came pretty easy to me.

Last weekend I decided I needed to try jQuery. It would make me a more well-rounded developer and it might suit particular projects better than Moo. And there’s nothing wrong with knowing both, right? I decided the first step would be porting over and existing MooTools class I’d written. What would be better than my much-misunderstood image protector class? Here it is, now in jQuery plugin format.

View Demo Download

The jQuery Plugin JavaScript

copyjQuery.fn.protectImage = function(settings) {
  settings = jQuery.extend({
    image: 'blank.gif',
    zIndex: 10
  }, settings);
  return this.each(function() {
    var position = $(this).position();
    var height = $(this).height();
    var width = $(this).width();
    $('<img />').attr({
      width: width,
      height: height,
      src: settings.image
    }).css({
      border: '1px solid #f00',
      top: position.top,
      left: position.left,
      position: 'absolute',
      zIndex: settings.zIndex
    }).appendTo('body')
  });
};

The plugin accepts two parameters: the zIndex and the image you’d like to use as the protector.

The jQuery Usage

copy$(window).bind('load', function() {
  $('img.protect').protectImage();
});

It’s important to run the plugin during the page’s “load” event so that the dimensions are correct.

This plugin requires the jQuery Dimensions plugin. Click here to download the blank.gif overlay file.

View Demo Download

Don’t bother commenting about how you know 20 ways to get around this. Many non-technical persons will be fooled.

Look forward to reading my impressions of my first jQuery project tomorrow!