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
JQuery-Based Magnifying Glass Effect | BUP.js
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 |
| scaleWidth | optionally resize the loupe image | null |
| round | a 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 |
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.
