MagnifyJS
A Javascript library enabling magnifying glass effect on any element with background-image property set. Background image can have any size.
Features:
- Custom zoom level
- Works on DIVs with SRC attribute image
- Works for all background-size configuration, automatically detect background-image: size cover/contain (work in progress!)
- Press ESC to disable
HOW TO USE:
<script type="text/javascript" src="magnify.js"></script>
<link href="magnify.css" rel="stylesheet" type="text/css">
<div class="magnify" src="image.jpg" style="background: url(image.jpg) center center /cover">
<script>
$('.magnify').magnifier(); // init
var magnify = $('.magnify').magnifier().data('magnifier'); // init and get data
</script>API:
magnify.setZoom(2); // zoom level to 200% (default 1.5)
magnify.enabled = false; // disable/enable
magnify.reInit(); // reinit