Wednesday, April 24, 2013

Lens Zoom Image On Mouse Over in Web Application Using jQuery

 Introduction


In this article I will explain how to create a lens to zoom an image on mouse over using jQuery. Image mouseover effects can make your website look dynamic and feel more effective. It also helps you to better allocate your image captions. I have seen similar effects as this one in a few sites here and there, and they were always built in Flash. I wanted a CSS and JavaScript (jQuery) solution so I whipped up this Hover Zoom effect.
First we download the files:
  1. jquery.min.js
  2. elevateZoom.js
These files are added to the project, then use the following procedure.

Coding

Lens_Zoom_Image.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery.min.js" type="text/javascript"></script>
    <script src="elevateZoom.js" type="text/javascript"></script>
    <style type="text/css">
        #image
        {
            height: 389px;
            width: 484px;
        }
    </style>
</head>
<body>
    <div style="width: 1186px; height: 509px">
        <img id="image" alt="" src="image.jpg" />      
    </div>
    <script type="text/javascript">
            $("#image").elevateZoom({
                zoomType: "lens",
                lensShape: "round",
                lensSize: 200
            });
    </script>
</body>
</html>
   
Output
Move the mouse onto the image to see the zoom in.
 Animation1.gif

No comments:

Post a Comment

Kashmir 370 and 35A : The Wound of india

क्या है जम्मू-कश्मीर में लागू धारा 370,35A पूर्ण विवरण Know about 370 act in Jammu एक बार फिर से राजनीति गलियारे में धारा 370,35A को ल...