---

OKZoom by OKFocus

OKZoom is a JQuery plugin that produces a portable loupe of variable size and shape. All other jQuery 'zoom' plugins we have encountered implement a square magnifying area. Ours is a circle. You want a circle.

Usage

Bind OKZoom to one or many image elements. The easiest way is to have a large image that is sized down using HTML or CSS: the loupe will show the full-size image on hover.

$('img').okzoom({
  width: 200,
  height: 200,
  round: true,
  background: "#fff",
  backgroundRepeat: "repeat",
  shadow: "0 0 5px #000",
  border: "1px solid black"
});

You can also apply OKZoom to every image on a page by binding to $('img'). If the source of the bound image changes -- say on an image gallery with several thumbnails under a main image -- the loupe will automatically update.

Alternatively, add a HTML5 data attribute data-okimage to your image tag containing the url to the image you want to see inside the loupe. Using this technique, OKZoom may be applied to any element -- hover over this paragraph to see an example.

Finally, the id of the loupe itself is ok-loupe.

Smoke Tests

Use these basic tests to get started with OKZoom as quickly as possible.

• Basic Test
• Change Image Test
• Multi-Image Test
• Data Attribute Test
• Non-Image Test

Options

width	of the loupe, in pixels	150
height	of the loupe, in pixels	150
scaleWidth	optionally force size of loupe image, in pixels	null
round	round loupe if true, square if false	true
background	color for image off the edge of the loupe	#fff
backgroundRepeat	repeat the image within the loupe	no-repeat
border	border around the loupe	0
shadow	box-shadow on the loupe	0 0 5px #000

Download OKZoom or Contribute on Github

Follow @okfocus

License

Copyright © 2012 OKFocus, http://okfoc.us

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
“Software”), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NON-INFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.