Image zoom tool – jQuery imageLens

jQuery imageLens plugin

Image zoom tool – jQuery imageLens plugin

Today we will continue our jQuery tutorials. And today we will talk about image zoom tools. During investigation, I was able to locate imageLens jQuery plugin. This is nice image zooming tool. It looks like round lens and have very easy initialization. Of course, I saw many another libraries too, but they was a little ugly, more like squares than the magnifying glass. I like this plugin, hope that you will like it too. And I sure that this is time to try demo.

Here are samples and downloadable package:

Live Demo
download in package

Ok, download the example files and lets start coding !


Step 1. HTML

As usual, we start with the HTML. This is source code of our sample:

index.html

<link rel="stylesheet" href="css/main.css" type="text/css" />
<script src="js/jquery-1.5.2.min.js"></script>
<script src="js/jquery.imageLens.js"></script>
<script src="js/main.js"></script>

<div class="example">
    <h3><a href="#">imageLens samples</a></h3>

    <img id="img_01" src="data_images/img1.jpg" width="350" height="262" />
    <img id="img_02" src="data_images/img2.jpg" width="350" height="262" />
    <img id="img_03" src="data_images/img3.jpg" width="350" height="262" />
    <img id="img_04" src="data_images/img4.jpg" width="350" height="262" />
</div>

As I hope – all clean here, no need explain it. Here are just main page with 4 images inside.

Step 2. CSS

Here are single CSS file with all necessary styles:

css/main.css

body{background:#eee;margin:0;padding:0}
.example{background:#FFF;width:800px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}
.example img {margin:22px}

Step 3. JS

Here are all JS files:

js/main.js

$(document).ready(function(){
    $('#img_01').imageLens(); // default initialization
    $('#img_02').imageLens({ lensSize: 200 }); // set lens size
    $('#img_03').imageLens({ lensSize: 200, imageSrc: 'data_images/img5.jpg' }); // lens size + custom image
    $('#img_04').imageLens({ borderSize: 8, borderColor: '#f00' }); // new border size and color
});

Everything is quite easy – when the page loads I perform initialization of imageLens plugin for each image. Each image will have different lens properties. Default lensSize is 100, size – 4, and color – #888. Of course, if you don`t going to use different lens on your set of images and want single – you can just change jquery selector.

js/jquery-1.5.2.min.js and js/jquery.imageLens.js

This is necessary libraries – jQuery and imageLens. Available in our package.

Step 4. Images

All our images located in ‘data_images’ folder:

img_01
img_02
img_03
img_04
img_04


Live Demo
download in package

Conclusion

Today I told you how to implement Lens-looking image zoomer. Sure that you will happy to use it in your projects. Good luck!

Enjoyed this Post?

If you enjoy our articles, feel free to share our tutorials with your friends.

5 thoughts on “Image zoom tool – jQuery imageLens

  1. Hi,
    Very useful plugin. I have a problem though: a search gives results in a dynamic table with images in it. The images vary each time and the number of images in the table also vary. How do I modify the main.js to allow the zooming for each and every image in the table. I am relatively new to php and am spending time learning and testing these days before I start something serious. I need to use this tool. Thanks for your reply.

    • Hello Bianca,
      As I see – you will need to re-initialize this for every your image after you received them.
      so mainly – you will need not to use my main.js, but add that code to output of generation of your dynamic table

    • Hello Carla,
      I think that this possibility should be given by the original plugin first, right? Unfortunately, by default there is no such opportunity

Leave a Reply

Your email address will not be published. Required fields are marked *

*

     

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>