Zoomy is a quick and easy plugin that will zoom into a picture. You only need two copies of one image first the display image and then the zoom image. Most CMS systems save or create multiple sizes of an image so its easy to set up. Just link the zoom picture on the display picture, and tell the plugin to use that link when zooming. It takes only a little bit of scripting.

Zoomy started with a simple concept. Make e-maginification look like regular magnification. To achive this goal Zoomy adds only two objects to the document. One a div the encases the the zoomed image, and a "optional" span that has a CSS3 gradient background. Zoomy is that simple. Of course Zoomy has a simple loader to handle the larger image, and many positioning options, but that is all secondary compared to the core function. At the time being there is only a total of six functions that make Zoomy run.

How to use Zoomy

It is super simple to use Zoomy. First just attach jQuery, 'zoomy.css' file, and the Zoomy plugin file (either jquery.zoomy0.5.min.js or jquery.zoomy0.5.js)

<link type="text/css" rel="stylesheet" href="path-to/zoom.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/jquery.zoomy0.5.min.js."></script>

The make sure that this is similiar to your layout of the image you want to Zoomy to use.

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

Then add in this snippet of Javascript to start Zoomy

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

Zoomy uses a three differnt CSS3 styles. They are: the well know border-radius, gradient-fill for the glare to add some style, and rgba color selectors also for the glare. These options can be turned off so that Zoomy looks the same on all browsers. Also on some larger pictures the default 200 x 200 zoom object is too small so one of the options is to change the size of the zoom object. Lastly is a temporary option to turn on the clickablitiy of the image. This is by default turned off because because it would just go to the larger image. I added in the option so that if someone would wanted to use Zoomy in conjuction with a lightbox plugin the lightbox will still work. You can apply these options by using this snippet