ImageLens jQuery Plug-in

Prologue:

In this article, we shall see what the ImageLens Plug-in in jQuery is and how to use it with web pages.

Short intro about jQuery:

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

ImageLens jQuery Plug-in:

ImageLens is a free jQuery plugin that can be used to add a lens style zooming effect to an image. With a small bit of jQuery code, you can integrate this useful tool with your image library.

ImageLens provides complete control of zoom level and size of lens and facilitates providing zoom-able images on your website. ImageLens is good for image galleries, product catalogs or displaying pieces of art online.

To use this ImageLens plug-in include the following lines into your webpage header block.

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

The following JavaScript starts the Lens effect when the mouse hovers over the image.

                        <script type="text/javascript" language="javascript">
                        $(function () {
                                    $("#zoom_01").imageLens();
                                    $("#zoom_02").imageLens({ lensSize: 200 });
                                    $("#zoom_03").imageLens({ imageSrc: "sample.jpg" });
                                    $("#zoom_04").imageLens({ borderSize: 8, borderColor: "#13f" });
                        });        
            </script>

HTML:



Example I: [Default Zooming]



If you use $("#zoom_01").imageLens(); then the Default lens will be displayed for the zooming.

The default lens size is 100 and the border is 4.

Example II:



To increase the lens size just set the lens size of the image as in the following code:

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

It increases the lens size to 200.

Example III:



$("#zoom_03").imageLens({ imageSrc: "sample.jpg" });

Here the interesting thing is the source of the Image on the page is different and the image on the lens is different. So when we are moving the mouse on the image it's displaying the image which is assigned to the lens as the zoomed part.

Example IV:



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

We can set the border size as well as border color for the lens using the above code.

Summary:

In this article we discussed the jQuery plug-in called ImageLens.

Thanks for spending your precious time here. Please provide your valuable feedbacks and comments, which enables me to give a better article the next time.

Please rate this Article.

Thanks.