Description:-
in this example we explain that how to create a lense zoom effect(mirror effect) of the image using jqury.
Look at the above Image we move the mouse on the wheel of the car then this part will be displayed in lenszoom effect.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Lenszoom.aspx.cs" Inherits="Lenszoom" %>
<!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>jQuery Zoom Image on Mouse Hover</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script src="jquery.elevateZoom-2.5.5.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#zoom_07").elevateZoom({
zoomType : "lens",
lensShape : "round",
lensSize : 200
});
});
</script>
</head>
<body>
<div>
<img id="zoom_07" src="images/small/image1.png" data-zoom-image="images/large/image1.jpg"/>
</div>
</body>
</html>
