jQuery Image Inner Zoom & Magnifier Plugin | okzoom

jquery-magnify-image-on-hover

OKZoom is a jQuery plugin that produces a portable lens of variable size and shape. All other jQuery ‘magnify zoom‘ plugins we’ve encountered implement a square zoomed area.

jquery magnify image on hover, magnify zoom, zoom plugin image, css zoom image magnifier, image inner zoom css, image magnifier jquery

How to make use of it:

1. Load the jQuery okzoom plugin after loading the jQuery library.

<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 to your document.

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

3. Connect to the plug-in 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 options are default.

$(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

});
});

Options

Usage  
width(in pixels}150
height(in pixels}150
scaleWidthoptionally resize the loupe imagenull
rounda round loupe if true, square if falsetrue
backgroundcolor for image off the edge of the loupe#fff
backgroundRepeatrepeat the image within the loupeno-repeat
borderborder around the loupe0
shadowbox-shadow on the loupe0 0 5px #000

Lightweight Image Inner Zoom & Magnifier Plugin, OKZoom by OKFocus Plugin/Github


See Demo And Download

Official Website(okfocus): Click Here

This superior jQuery/javascript plugin is developed by okfocus. For extra Advanced usage, please go to the official website.