[25177] | 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 | {
|
---|
[25282] | 58 | if (!over && _imageZoomEnabled)
|
---|
[25177] | 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 | {
|
---|
[26179] | 76 | image = largeArea.children("img");
|
---|
| 77 | document.location.href = image.attr("src");
|
---|
[25177] | 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); |
---|