1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
|
/*!
Wheelzoom 2.0.1
license: MIT
http://www.jacklmoore.com/wheelzoom
*/
(function($){
var defaults = {
zoom: 0.10
};
var wheel;
function setSrcToBackground(img) {
var transparentPNG = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==";
// Explicitly set the size to the current dimensions,
// as the src is about to be changed to a 1x1 transparent png.
img.width = img.width;
img.height = img.height;
img.style.backgroundImage = "url('"+img.src+"')";
img.style.backgroundRepeat = 'no-repeat';
img.src = transparentPNG;
}
if ( document.onmousewheel !== undefined ) { // Webkit/Opera/IE
wheel = 'onmousewheel';
}
else if ( document.onwheel !== undefined) { // FireFox 17+
wheel = 'onwheel';
}
$.fn.wheelzoom = function(options){
var settings = $.extend({}, defaults, options);
if (!this[0] || !wheel || !('backgroundSize' in this[0].style)) { // do nothing in IE8 and lower
return this;
}
return this.each(function(){
var img = this,
$img = $(img);
function loaded() {
var width = $img.width(),
height = $img.height(),
bgWidth = width,
bgHeight = height,
bgPosX = 0,
bgPosY = 0;
function reset() {
bgWidth = width;
bgHeight = height;
bgPosX = bgPosY = 0;
updateBgStyle();
}
function updateBgStyle() {
if (bgPosX > 0) {
bgPosX = 0;
} else if (bgPosX < width - bgWidth) {
bgPosX = width - bgWidth;
}
if (bgPosY > 0) {
bgPosY = 0;
} else if (bgPosY < height - bgHeight) {
bgPosY = height - bgHeight;
}
img.style.backgroundSize = bgWidth+'px '+bgHeight+'px';
img.style.backgroundPosition = bgPosX+'px '+bgPosY+'px';
}
setSrcToBackground(img);
$img.css({
backgroundSize: width+'px '+height+'px',
backgroundPosition: '0 0'
}).bind('wheelzoom.reset', reset);
img[wheel] = function (e) {
var deltaY = 0;
e.preventDefault();
if (e.deltaY) { // FireFox 17+ (IE9+, Chrome 31+?)
deltaY = e.deltaY;
} else if (e.wheelDelta) {
deltaY = -e.wheelDelta;
}
// As far as I know, there is no good cross-browser way to get the cursor position relative to the event target.
// We have to calculate the target element's position relative to the document, and subtrack that from the
// cursor's position relative to the document.
var offsetParent = $img.offset();
var offsetX = e.pageX - offsetParent.left;
var offsetY = e.pageY - offsetParent.top;
// Record the offset between the bg edge and cursor:
var bgCursorX = offsetX - bgPosX;
var bgCursorY = offsetY - bgPosY;
// Use the previous offset to get the percent offset between the bg edge and cursor:
var bgRatioX = bgCursorX/bgWidth;
var bgRatioY = bgCursorY/bgHeight;
// Update the bg size:
if (deltaY < 0) {
bgWidth += bgWidth*settings.zoom;
bgHeight += bgHeight*settings.zoom;
} else {
bgWidth -= bgWidth*settings.zoom;
bgHeight -= bgHeight*settings.zoom;
}
// Take the percent offset and apply it to the new size:
bgPosX = offsetX - (bgWidth * bgRatioX);
bgPosY = offsetY - (bgHeight * bgRatioY);
// Prevent zooming out beyond the starting size
if (bgWidth <= width || bgHeight <= height) {
reset();
} else {
updateBgStyle();
}
};
// Make the background draggable
img.onmousedown = function(e){
var last = e;
e.preventDefault();
function drag(e) {
e.preventDefault();
bgPosX += (e.pageX - last.pageX);
bgPosY += (e.pageY - last.pageY);
last = e;
updateBgStyle();
}
$(document)
.on('mousemove', drag)
.one('mouseup', function () {
$(document).unbind('mousemove', drag);
});
};
}
if (img.complete) {
loaded();
} else {
$img.one('load', loaded);
}
});
};
$.fn.wheelzoom.defaults = defaults;
}(window.jQuery));
|
