Picture Magnifier jquery.jqzoom.js Use instance with Magnifier icon _jquery

1. Jquery.jqzoom.js

Jqzoom allows to realize a small magnifier windo
W,close//To the "image" or images on your Web page easily. Jqzoom version 2.2//Author Doc. Ing.
Renzi Marco (www.mind-projects.it)//on DEC 2007//I ' m looking for a job,pick me up!!! Mail:renzi.mrc@gmail.com//************************************************************** (function ($) {$. Fn.jqueryzoom = function (options) {var settings = {xzoom:200,//zoomed width default width yzoom:200,//zoomed div de Fault width offset:10,//zoomed div default offset position: "Right",//zoomed div default position,offset position are to
The right of the image lens:1,//zooming lens on the image,by default is 1;
Preload:1};
if (options) {$.extend (settings, options);} var noalt = '; $ (this). Hover (function () {var imageleft = $ (this). Offset (). left; var imagetop = $ (this). Offset (). top; var imagewidth = $ (this). Children (' img "). Get (0). offsetwIdth;
var ImageHeight = $ (this). Children (' img '). Get (0). offsetheight;
Noalt = $ (this). Children ("img"). attr ("alt");
var bigimage = $ (this). Children ("img"). attr ("jqimg");
$ (this). Children ("img"). attr ("alt"); if ($ ("Div.zoomdiv"). Get (). length = = 0) {$ (this). After ("<div class= ' zoomdiv ' ></div>");
$ (this). Append ("<div class= ' Jqzoompup ' > </div>"); } if (settings.position = = "Right") {if (Imageleft + imagewidth + settings.offset + settings.xzoom > Screen.width) {L
EFTPOS = Imageleft-settings.offset-settings.xzoom; else {LeftPos = imageleft + ImageWidth + Settings.offset;}} else {leftpos = Imageleft-settings.xzoom-settings.offset; if (LeftPos < 0) {LeftPos = imageleft + imagewidth + SE
Ttings.offset;
} $ ("Div.zoomdiv"). CSS ({top:imagetop, left:leftpos});
$ ("Div.zoomdiv"). Width (settings.xzoom);
$ ("Div.zoomdiv"). Height (settings.yzoom);
$ ("Div.zoomdiv"). Show (); if (!settings.lens) {$ (this). CSS (' cursor ', ' crosshair '); } $ (document.body). MouseMove (function (e) {mouse = new MouseEvent (e);/*$ ("Div.jqzoompup"). Hide (); */var Bigwidth = $ (". b
Igimg "). Get (0). offsetwidth;
var bigheight = $ (". Bigimg"). Get (0). offsetheight;
var ScaleY = ' x ';
var ScaleX = ' Y '; if (isNaN (ScaleX) | isNaN (ScaleY)) {var ScaleX = (bigwidth/imagewidth); var ScaleY = (bigheight/imageheight); $ ("Div.
Jqzoompup "). Width ((settings.xzoom)/ScaleX);
$ ("Div.jqzoompup"). Height ((settings.yzoom)/ScaleY);
if (Settings.lens) {$ ("Div.jqzoompup"). CSS (' visibility ', ' visible ');}
Xpos = mouse.x-$ ("Div.jqzoompup"). Width ()/2-imageleft;
Ypos = mouse.y-$ ("Div.jqzoompup"). Height ()/2-imagetop; if (settings.lens) {xpos = (mouse.x-$ ("Div.jqzoompup"). Width ()/2 < Imageleft)? 0: (mouse.x + $ ("Div.jqzoompup"). Width ()/2 > ImageWidth + imageleft)?
(ImageWidth-$ ("Div.jqzoompup"). Width ()-2): xpos; Ypos = (Mouse.y-$ ("Div.jqzoompup"). Height ()/2 < Imagetop)? 0: (mouse.y + $ ("Div.jqzoompup"). Height ()/2 > ImageHeight + imagetop)?
(ImageHeight-$ ("Div.jqzoompup"). Height ()-2): ypos;
} if (Settings.lens) {$ ("Div.jqzoompup"). CSS ({top:ypos, left:xpos});} scrolly = Ypos;
$ ("Div.zoomdiv"). Get (0). scrolltop = scrolly * ScaleY;
SCROLLX = xpos;
$ ("Div.zoomdiv"). Get (0). ScrollLeft = (scrollx) * SCALEX;
});
, function () {$ (this). Children ("img"). attr ("alt", Noalt); $ (document.body). Unbind ("MouseMove"); if (Settings.lens) {
$ ("Div.jqzoompup"). Remove ();
} $ ("Div.zoomdiv"). Remove ();
});
Count = 0; if (settings.preload) {$ (' body '). Append ("<div style= ' display:none; ' class= ' jqpreload" + count + "' >sdsdssdsd<
/div> "); $ (this). each (function () {var imagetopreload = $ (this). Children ("img"). attr ("jqimg"); var content = JQuery ('
Div.jqpreload ' + Count + '). html ();
JQuery (' div.jqpreload ' + Count + '). HTML (content + '  ');
});
}}) (JQuery); function MouseEvent (e) {this.x = E.pagex; this.y = E.pagey;}

2. Jqzoom.css

/*jqzoom*/
. jqzoom{
border:1px solid #BBB;
Float:left;
position:relative;
padding:0px;
Cursor:pointer;
}
div.zoomdiv {
z-index:999;
Position:absolute;
top:0px;
left:0px;
width:200px;
height:200px;
Background: #ffffff;
border:1px solid #CCCCCC;
Display:none;
Text-align:center;
Overflow:hidden;
}
div.jqzoompup {
z-index:999;
Visibility:hidden;
Position:absolute;
top:0px;
left:0px;
width:50px;
height:50px;
border:1px solid #aaa;
Background: #ffffff URL (.. /images/zoomlens.gif) 50% top no-repeat;
opacity:0.5;
-moz-opacity:0.5;
-khtml-opacity:0.5;
Filter:alpha (opacity=50);
}

3. HTML code

 <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  
  
 

Attachment: Magnifier icon (zoomlens.gif)