Lightweight Image Inner Zoom & Magnifier Plugin For jQuery - okzoom

Yet another jQuery plugin which provides image inner zoom functionality by creating a magnifying glass effect on top of your images.

Basic Usage:

1. Load the jQuery okzoom plugin after loading jQuery library, but before the closing body tag.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="src/okzoom.js"></script>

2. Add an image into your document.

<img id="example" src="demo.jpg">

3. Call the plugin on the image and set up the magnifier options.

$(function(){
$('#example').okzoom({
  width: 200,
  height: 200,
  border: "1px solid black",
  shadow: "0 0 5px #000"
});
});

4. All the default options.

$(function(){
$('#example').okzoom({

  width: 150,
  height: 150,

  // optionally resize the loupe image
  scaleWidth: null

  // round loupe if true, square if false
  round: true,

  // color for image off the edge of the loupe
  background: "#fff",

  // repeat the image within the loupe
  backgroundRepeat: "no-repeat",

  // box-shadow on the loupe
  shadow: "0 0 5px #000",

  // border around the loupe
  border: 0

});
});

---

This awesome jQuery plugin is developed by okfocus. For more Advanced Usages, please check the demo page or visit the official website.