1 | (function ($)
|
---|
2 | {
|
---|
3 | $.anythingZoomer =
|
---|
4 | {
|
---|
5 | defaults:
|
---|
6 | {
|
---|
7 | smallArea: "#small",
|
---|
8 | largeArea: "#large",
|
---|
9 | zoomPort: "#overlay",
|
---|
10 | mover: "#mover",
|
---|
11 | expansionSize: 30,
|
---|
12 | speedMultiplier: 1.5
|
---|
13 | }
|
---|
14 | }
|
---|
15 | $.fn.extend(
|
---|
16 | {
|
---|
17 | anythingZoomer: function (config)
|
---|
18 | {
|
---|
19 | var config = $.extend({}, $.anythingZoomer.defaults, config);
|
---|
20 | var wrap = $(this);
|
---|
21 | var smallArea = $(config.smallArea);
|
---|
22 | var largeArea = $(config.largeArea);
|
---|
23 | var zoomPort = $(config.zoomPort);
|
---|
24 | var mover = $(config.mover);
|
---|
25 | var expansionSize = config.expansionSize;
|
---|
26 | var speedMultiplier = config.speedMultiplier;
|
---|
27 | var over = false;
|
---|
28 |
|
---|
29 | function setup(smallArea, largeArea, wrap, zoomPort, mover, expansionSize, speedMultiplier)
|
---|
30 | {
|
---|
31 | smallArea.show();
|
---|
32 | zoomPort.fadeIn();
|
---|
33 | mover.css(
|
---|
34 | {
|
---|
35 | width: mover.data("origWidth"),
|
---|
36 | height: mover.data("origHeight"),
|
---|
37 | overflow: "hidden",
|
---|
38 | position: "absolute"
|
---|
39 | })
|
---|
40 | wrap.css(
|
---|
41 | {
|
---|
42 | //width: "auto"
|
---|
43 | }).mousemove(function (e)
|
---|
44 | {
|
---|
45 | var x = e.pageX - smallArea.offset().left;
|
---|
46 | var y = e.pageY - smallArea.offset().top;
|
---|
47 | if ((x < -expansionSize) || (x > smallArea.width() + expansionSize) || (y < -expansionSize) || (y > smallArea.height() + expansionSize))
|
---|
48 | {
|
---|
49 | if (over)
|
---|
50 | {
|
---|
51 | mover.fadeOut(50);
|
---|
52 | over = false;
|
---|
53 | }
|
---|
54 | return;
|
---|
55 | }
|
---|
56 | else
|
---|
57 | {
|
---|
58 | if (!over && _imageZoomEnabled)
|
---|
59 | {
|
---|
60 | mover.fadeIn();
|
---|
61 | over = true;
|
---|
62 | }
|
---|
63 | }
|
---|
64 | mover.css(
|
---|
65 | {
|
---|
66 | top: y - (mover.height() / 2),
|
---|
67 | left: x - (mover.width() / 2)
|
---|
68 | });
|
---|
69 | largeArea.css(
|
---|
70 | {
|
---|
71 | left: (-(e.pageX - smallArea.offset().left) * speedMultiplier) + (mover.width() / 2),
|
---|
72 | top: (-(e.pageY - smallArea.offset().top) * speedMultiplier) + (mover.height() / 2),
|
---|
73 | });
|
---|
74 | }).dblclick(function ()
|
---|
75 | {
|
---|
76 | image = largeArea.children("img");
|
---|
77 | document.location.href = image.attr("src");
|
---|
78 | });
|
---|
79 | };
|
---|
80 |
|
---|
81 | mover.data("origWidth", mover.width()).data("origHeight", mover.height());
|
---|
82 | // Because the largeArea is often hidden, the width() function returns zero, take width from CSS instead
|
---|
83 | largeArea.data("origWidth", largeArea.css("width"));
|
---|
84 | setup(smallArea, largeArea, wrap, zoomPort, mover, expansionSize, speedMultiplier);
|
---|
85 | return this;
|
---|
86 | }
|
---|
87 | });
|
---|
88 | })(jQuery); |
---|