Zoom In On Your Website with ImageLens
Here’s a terrific jQuery plugin that can make viewing your website extra-fun for visitors! Created by a web developer at Dailycoding.com , ImageLens is one cool plugin that zooms in on images when you hover over them.
Here’s what you will need: jQuery, image and the ImageLens plugin – jquery.imagelens.js.
Check out the demo and the download.
Include jQuery and jQuery.imagelens.js in your page:
<script src=”jquery.js” type=”text/javascript”></script>
<script src=”jquery.imageLens.js” type=”text/javascript”></script>
Use ImageLens for default image lens. This will calculate the image and the zoom function.
$("#img_01").imageLens();
You can specify the image source if you have a different thumbnail image from the zoomed image.
$("#img_03").imageLens({ imageSrc: "sample01.jpg" });
Customizing the lens size:
$("#img_02").imageLens({ lensSize: 200 });
You can also adjust the attributes in the lens like border size and border color.
$("#img_04").imageLens({ borderSize: 8, borderColor: "#06f" });
0
494
