ImageLens – A jQuery plug-in for Lens Effect Image Zooming

View Demo

Download Source Files

I was searching a good jQuery plug-in for image zooming but couldn't find any which was matching my criteria. I need the lens effect while zooming images and it should work without much plumbing. So, I decided to create one and now sharing this with everyone.

What I need to use this?

1. jQuery
2. ImageLens plug-in – jquery.imagelens.js
3. An image

How to use this?

Include jQuery and jquery.imageLens.js in you web page -

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.imageLens.js" type="text/javascript"></script>

For default image lens just use imageLens as below. Note that it will automatically calculate actual size of image and start showing zooming -

$("#img_01").imageLens();

Note - If you are using IE 8 or lower than you will see a square lens

(hover on image to see the lens effect)

If you thumbnail  image is different from zoomed image then you can specify custom image source -

$("#img_03").imageLens({ imageSrc: "sample01.jpg" });

(hover on image to see the lens effect)

You can also change lens size -

$("#img_02").imageLens({ lensSize: 200 });

(hover on image to see the lens effect)

There are some more attributes you can adjust in the lens like border color and border size -

$("#img_04").imageLens({ borderSize: 8, borderColor: "#06f" });

(hover on image to see the lens effect)

Image courtesy http://www.smashingmagazine.com/

Updates

1. Optimized plug-in code for size and performance - By Andreas
2. Round lens support in IE8 or below - By Jeppe

View Demo

Download Source Files

source : http://www.dailycoding.com/Posts/imagelens__a_jquery_plugin_for_lens_effect_image_zooming.aspx