🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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.

Plugins Zoom

Documentation

okzoom

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. See a demo here.

Usage

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" });  

Options

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

Data Attribute

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.

Run Tests

OKFocus tests JavaScript with Jasmine. Run tests:

 $ bundle install $ jasmine init $ rake jasmine  

You May Also Like