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. See a demo here.
You can bind OKZoom to one or many image elements, producing a “zoom” effect like this:
With code like this:
$('img').okzoom({
width: 200,
height: 200,
round: true,
background: "#fff",
backgroundRepeat: "repeat",
shadow: "0 0 5px #000",
border: "1px solid black"
});
| Usage | ||
| width | (in pixels} | 150 |
| height | (in pixels} | 150 |
| scaleWidth | optionally resize the loupe image | 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 |
Typically, we use this plugin on an image that has been sized down in HTML, and the loupe displays the image at its normal size. If you like, you can add an HTML5 data attribute data-okimage to your image to substitute alternative content inside the loupe.
OKFocus tests JavaScript with Jasmine. Run tests:
$ bundle install
$ jasmine init
$ rake jasmine