 |
| image by: cssglobe.com |
The task was to create a script that will allow users to see large details of the product while moving cursor over medium sized image.
This plugin is customizable with several options and simple CSS definitions. In terms of CSS all you need to do is define the newly created image zoom element's size, position and appearance.
This all the code.
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="easyzoom.js"></script>
<script type="text/javascript">
jQuery(function($){
$('a.zoom').easyZoom();
});
</script>
<style type="text/css">
#container{
padding:10px;
}
#easy_zoom{
width:600px;
height:400px;
border:5px solid #eee;
background:#fff;
color:#333;
position:absolute;
top:60px;
left:400px;
overflow:hidden;
-moz-box-shadow:0 0 10px #777;
-webkit-box-shadow:0 0 10px #777;
box-shadow:0 0 10px #777;
/* vertical and horizontal alignment used for preloader text */
line-height:400px;
text-align:center;
}
</style>
</head>
<body>
<div id="container">
<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXr2ap-PNko6kOO95BOHMaihC13QN5U4zK9J5ZADIVrSV49gpRF08FVKyk84AC0uz6vtMeJ-BF5zIHd9yaLllfmgnzfpHxAOABzP9yqgnMi53ID5ssRJJyvqBY41_SXORmJ9lgpAeDdeM/s1600/New-York.jpg" class="zoom"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYXIvlEnJsFrMqbOxMdk2vwJsR8uhXxXqvmQ96dPxt_70bQS4CVTOBwLTvbPdUm5S_p9kKq_nYmDNMtRGfFTsPZRcPbeFuPnN7QiQL8Rp2x_Ec_2sOhP3P-2UKS8JSvWFHEzGAUcDbgy0/" alt="New York"></a></p>
<p><em>Roll over the image to view details.</em></p>
</div>
</body>
</html>
source article : jQuery plugin: Easy Image Zoom
