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?
- jQuery
- ImageLens plug-in – jquery.imagelens.js
- 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 Andreas2. Round lens support in IE8 or below - By Jeppe
|
No comments:
Post a Comment