Lightweight Image Inner Zoom & Magnifier Plugin For jQuery - okzoom

File Size: 675 KB
Views Total: 9775
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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.

  width: 200,
  height: 200,
  border: "1px solid black",
  shadow: "0 0 5px #000"

4. All the default options.


  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.