This article introduces a very useful JQUERY image magnifier plug-in. In many e-commerce websites, when looking at small pictures, we often want to see a larger image of this product,
Traditionally, if you open another big image, it's not COOL, so we found this plug-in,
Plugin:
Http://www.mind-projects.it/projects/jqzoom/
For a brief introduction, after downloading,
Prepare a small image and a clear big image, and then introduce JQUERY and JS of this plug-in into the page.
<Script src = "./js/jquery-1.3.2.min.js" type = "text/javascript"> </script>
<Script src = "../js/jqzoom. pack.1.0.1.js" type = "text/javascript"> </script>
Then introduce a CSS
<Link rel = "stylesheet" href = "../css/jqzoom.css" type = "text/css">
Then there are two big pictures and small pictures.
<A href = "kawasakigreen.jpg" class = "jqzoom" style = "" title = "kawasaki">
</a>
Note that a large image, a small image, and "kawasakigreen_small.jpg" indicates the title of the text to appear in the magnifier.
Then in JS:
Copy to ClipboardReference: [www.bkjia.com] <script type = "text/javascript">
$ (Function (){
Var options3 =
{
ZoomWidth: 200,
ZoomHeight: 200,
XOffset: 20,
Title: false,
Lens: false
}
$ (". Jqzoom"). jqzoom (options3 );
});
</Script>
Here is the magnifying glass effect. For more information, see.
Http://www.mind-projects.it/projects/jqzoom/demos.php#demo1