Awesome jQuery Magnifier Plugin – ZOOMY

Sam Deering
Tweet

zoomy

Hey guys, i stumbled upon this awesome image magnifying zoom plugin which lets you zoom images on a webpage using your mouse like a magnifying glass. You simply click on the image to activate the zoom and then just hover your mouse over the image. I am particularly impressed with how smooth the animation is compared to similar jQuery magnifier plugins that are out there.

See Live Demo

jQuery Code

$(function(){
    $('.zoom').zoomy();                
})(jQuery)

Options

$('.zoom').zoomy({
    zoomSize: 110,
    round: true,
    glare: true,
    zoomText: click to Zoom
});

HTML Code

<a href="zoomImg.jpg" class="zoom">
    <img src="displayImg.jpg" alt="This is the Display Image" />
</a>

Includes

<link type="text/css" rel="stylesheet" href="path-to/zoom1.0.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="path-to/zoomy1.0.js."></script>

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Creig

    Hello.. where can i find the css. and js. files for this script?