Building an image inspector using jquery.pep.js

– 07/10/13

Building an image inspector is a breeze using jquery.pep.js.

The example below shows how it works. In short, the white magnifier rectangle is a pep object bound like so:

var opts = {
  constrainTo: 'parent',
  shouldEase: false,
  drag: function(ev, obj){
    /* custom logic, see Codepen example below */
  }
};

$('.magnifier').pep(opts);

Now, with a little custom logic which can be seen in the Codepen Javascript code, we can alter the background-position of the larger image as we drag around the magnifier.

Result

Check out this Pen!