Lightweight Image Inner Zoom & Magnifier Plugin For jQuery - okzoom
File Size: | 675 KB |
---|---|
Views Total: | 9711 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.