Magnifier Effect---enlarge.js

HTML page:

Note: The size of the matte layer depends on = = = "Layerwidth/layerheight = Largewidth/largeheight

Enlarge.js page

/*
Jquery.enlarge.js v1.1
by Abelyao, usky.org
*/

(Function ($)
{
var defaults =
{
Shadecolor: "#FFD24D",
Shadeborder: "#FF8000",
shadeopacity:0.5,
Cursor: "Move",

layerwidth:400,
LAYERHEIGHT:300,
Layerborder: "#DDD",
Fade:true,

largewidth:1280,
largeheight:960
}

var enlarge = function (option)
{
option = $.extend ({}, defaults, option);

$ (this). each (function ()
{
var = $ (this). CSS ("position", "relative");
var img = Self.children (). First ();

var ratio =
{
X:img.width ()/Option.largewidth,
Y:img.height ()/Option.largeheight
}

var size =
{
Shade
{
Width:option.layerwidth * ratio.x,
Height:option.layerheight * RATIO.Y
}
}

var shade = $ ("<div>"). CSS (
{
"Position": "Absolute",
"Left": "0px",
"Top": "0px",
"Background-color": Option.shadecolor,
"Border": "1px solid" + Option.shadeborder,
"width": size.shade.width,
"Height": size.shade.height,
"Opacity": option.shadeopacity,
"Cursor": option.cursor
});
Shade.hide (). AppendTo (self);

var large = $ ("{
"Position": "Absolute",
"Display": "Block",
"width": option.largewidth,
"Height": option.largeheight
});
var layer = $ ("<div>"). CSS (
{
"Position": "Absolute",
"Left": self.width () + 5,
"Top": 0,
"Background-color": "#111",
"Overflow": "Hidden",
"width": option.layerwidth,
"Height": option.layerheight,
"Border": "1px solid" + Option.layerborder
});
Large.attr ("src", self.attr ("href"));
Large.appendto (layer);
Layer.hide (). AppendTo (self);

var half =
{
X:SIZE.SHADE.WIDTH/2,
Y:size.shade.height/2
}

var area =
{
Width:self.innerWidth ()-Shade.outerwidth (),
Height:self.innerHeight ()-Shade.outerheight ()
}

var offset = Self.offset ();

var show = function ()
{
offset = Self.offset ();
Shade.show ();
if (Option.fade) Layer.stop (). FadeIn (300);
else Layer.show ();
}

var hide = function ()
{
Shade.hide ();
Layer.hide ();
}

Self.mousemove (function (e)
{
var x = E.pagex-offset.left;
var y = e.pagey-offset.top;

if (x < 0 | | x > Self.innerwidth ()) return hide ();
if (Y < 0 | | y > self.innerheight ()) return hide ();

x = x-half.x;
y = y-half.y;

if (x < 0) x = 0;
if (Y < 0) y = 0;
if (x > Area.width) x = area.width;
if (y > area.height) y = area.height;

SHADE.CSS (
{
Left:x,
Top:y
});

LARGE.CSS (
{
Left: (0-x/ratio.x),
Top: (0-y/RATIO.Y)
});
})
. MouseEnter (show)
. MouseLeave (hide);
});
}

$.fn.extend (
{
Enlarge:enlarge
});
}) (JQuery)

Reference URL: https://github.com/abelyao/enlarge.js

Magnifier Effect---enlarge.js