Describes a very useful jquery image magnifier plug-in.

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

 

<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