Image zoom tool – jQuery imageLens

Image zoom with imageLens. 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:

Contents

Step 1. HTML
index.html
Step 2. CSS
css/main.css
Step 3. JS
js/main.js
js/jquery-1.5.2.min.js and js/jquery.imageLens.js
Step 4. Images
Conclusion

Live Demo

[sociallocker]

download in package

[/sociallocker]

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.