| 41 |
lars |
1 |
/*
|
|
|
2 |
* jQuery elevateZoom 3.0.8
|
|
|
3 |
* Demo's and documentation:
|
|
|
4 |
* www.elevateweb.co.uk/image-zoom
|
|
|
5 |
*
|
|
|
6 |
* Copyright (c) 2012 Andrew Eades
|
|
|
7 |
* www.elevateweb.co.uk
|
|
|
8 |
*
|
|
|
9 |
* Dual licensed under the GPL and MIT licenses.
|
|
|
10 |
* http://en.wikipedia.org/wiki/MIT_License
|
|
|
11 |
* http://en.wikipedia.org/wiki/GNU_General_Public_License
|
|
|
12 |
*
|
|
|
13 |
|
|
|
14 |
/*
|
|
|
15 |
* jQuery elevateZoom 3.0.3
|
|
|
16 |
* Demo's and documentation:
|
|
|
17 |
* www.elevateweb.co.uk/image-zoom
|
|
|
18 |
*
|
|
|
19 |
* Copyright (c) 2012 Andrew Eades
|
|
|
20 |
* www.elevateweb.co.uk
|
|
|
21 |
*
|
|
|
22 |
* Dual licensed under the GPL and MIT licenses.
|
|
|
23 |
* http://en.wikipedia.org/wiki/MIT_License
|
|
|
24 |
* http://en.wikipedia.org/wiki/GNU_General_Public_License
|
|
|
25 |
*/
|
|
|
26 |
|
|
|
27 |
|
|
|
28 |
if ( typeof Object.create !== 'function' ) {
|
|
|
29 |
Object.create = function( obj ) {
|
|
|
30 |
function F() {};
|
|
|
31 |
F.prototype = obj;
|
|
|
32 |
return new F();
|
|
|
33 |
};
|
|
|
34 |
}
|
|
|
35 |
|
|
|
36 |
(function( $, window, document, undefined ) {
|
|
|
37 |
var ElevateZoom = {
|
|
|
38 |
init: function( options, elem ) {
|
|
|
39 |
var self = this;
|
|
|
40 |
|
|
|
41 |
self.elem = elem;
|
|
|
42 |
self.$elem = $( elem );
|
|
|
43 |
|
|
|
44 |
self.imageSrc = self.$elem.data("zoom-image") ? self.$elem.data("zoom-image") : self.$elem.attr("src");
|
|
|
45 |
|
|
|
46 |
self.options = $.extend( {}, $.fn.elevateZoom.options, options );
|
|
|
47 |
|
|
|
48 |
//TINT OVERRIDE SETTINGS
|
|
|
49 |
if(self.options.tint) {
|
|
|
50 |
self.options.lensColour = "none", //colour of the lens background
|
|
|
51 |
self.options.lensOpacity = "1" //opacity of the lens
|
|
|
52 |
}
|
|
|
53 |
//INNER OVERRIDE SETTINGS
|
|
|
54 |
if(self.options.zoomType == "inner") {self.options.showLens = false;}
|
|
|
55 |
|
|
|
56 |
|
|
|
57 |
//Remove alt on hover
|
|
|
58 |
|
|
|
59 |
self.$elem.parent().removeAttr('title').removeAttr('alt');
|
|
|
60 |
|
|
|
61 |
self.zoomImage = self.imageSrc;
|
|
|
62 |
|
|
|
63 |
self.refresh( 1 );
|
|
|
64 |
|
|
|
65 |
|
|
|
66 |
|
|
|
67 |
//Create the image swap from the gallery
|
|
|
68 |
$('#'+self.options.gallery + ' a').click( function(e) {
|
|
|
69 |
|
|
|
70 |
//Set a class on the currently active gallery image
|
|
|
71 |
if(self.options.galleryActiveClass){
|
|
|
72 |
$('#'+self.options.gallery + ' a').removeClass(self.options.galleryActiveClass);
|
|
|
73 |
$(this).addClass(self.options.galleryActiveClass);
|
|
|
74 |
}
|
|
|
75 |
//stop any link on the a tag from working
|
|
|
76 |
e.preventDefault();
|
|
|
77 |
|
|
|
78 |
//call the swap image function
|
|
|
79 |
if($(this).data("zoom-image")){self.zoomImagePre = $(this).data("zoom-image")}
|
|
|
80 |
else{self.zoomImagePre = $(this).data("image");}
|
|
|
81 |
self.swaptheimage($(this).data("image"), self.zoomImagePre);
|
|
|
82 |
return false;
|
|
|
83 |
});
|
|
|
84 |
|
|
|
85 |
},
|
|
|
86 |
|
|
|
87 |
refresh: function( length ) {
|
|
|
88 |
var self = this;
|
|
|
89 |
|
|
|
90 |
setTimeout(function() {
|
|
|
91 |
self.fetch(self.imageSrc);
|
|
|
92 |
|
|
|
93 |
}, length || self.options.refresh );
|
|
|
94 |
},
|
|
|
95 |
|
|
|
96 |
fetch: function(imgsrc) {
|
|
|
97 |
//get the image
|
|
|
98 |
var self = this;
|
|
|
99 |
var newImg = new Image();
|
|
|
100 |
newImg.onload = function() {
|
|
|
101 |
//set the large image dimensions - used to calculte ratio's
|
|
|
102 |
self.largeWidth = newImg.width;
|
|
|
103 |
self.largeHeight = newImg.height;
|
|
|
104 |
//once image is loaded start the calls
|
|
|
105 |
self.startZoom();
|
|
|
106 |
self.currentImage = self.imageSrc;
|
|
|
107 |
//let caller know image has been loaded
|
|
|
108 |
self.options.onZoomedImageLoaded(self.$elem);
|
|
|
109 |
}
|
|
|
110 |
newImg.src = imgsrc; // this must be done AFTER setting onload
|
|
|
111 |
|
|
|
112 |
return;
|
|
|
113 |
|
|
|
114 |
},
|
|
|
115 |
|
|
|
116 |
startZoom: function( ) {
|
|
|
117 |
var self = this;
|
|
|
118 |
//get dimensions of the non zoomed image
|
|
|
119 |
self.nzWidth = self.$elem.width();
|
|
|
120 |
self.nzHeight = self.$elem.height();
|
|
|
121 |
|
|
|
122 |
//activated elements
|
|
|
123 |
self.isWindowActive = false;
|
|
|
124 |
self.isLensActive = false;
|
|
|
125 |
self.isTintActive = false;
|
|
|
126 |
self.overWindow = false;
|
|
|
127 |
|
|
|
128 |
//CrossFade Wrappe
|
|
|
129 |
if(self.options.imageCrossfade){
|
|
|
130 |
self.zoomWrap = self.$elem.wrap('<div style="height:'+self.nzHeight+'px;width:'+self.nzWidth+'px;" class="zoomWrapper" />');
|
|
|
131 |
self.$elem.css('position', 'absolute');
|
|
|
132 |
}
|
|
|
133 |
|
|
|
134 |
self.zoomLock = 1;
|
|
|
135 |
self.scrollingLock = false;
|
|
|
136 |
self.changeBgSize = false;
|
|
|
137 |
self.currentZoomLevel = self.options.zoomLevel;
|
|
|
138 |
|
|
|
139 |
|
|
|
140 |
//get offset of the non zoomed image
|
|
|
141 |
self.nzOffset = self.$elem.offset();
|
|
|
142 |
//calculate the width ratio of the large/small image
|
|
|
143 |
self.widthRatio = (self.largeWidth/self.currentZoomLevel) / self.nzWidth;
|
|
|
144 |
self.heightRatio = (self.largeHeight/self.currentZoomLevel) / self.nzHeight;
|
|
|
145 |
|
|
|
146 |
|
|
|
147 |
//if window zoom
|
|
|
148 |
if(self.options.zoomType == "window") {
|
|
|
149 |
self.zoomWindowStyle = "overflow: hidden;"
|
|
|
150 |
+ "background-position: 0px 0px;text-align:center;"
|
|
|
151 |
+ "background-color: " + String(self.options.zoomWindowBgColour)
|
|
|
152 |
+ ";width: " + String(self.options.zoomWindowWidth) + "px;"
|
|
|
153 |
+ "height: " + String(self.options.zoomWindowHeight)
|
|
|
154 |
+ "px;float: left;"
|
|
|
155 |
+ "background-size: "+ self.largeWidth/self.currentZoomLevel+ "px " +self.largeHeight/self.currentZoomLevel + "px;"
|
|
|
156 |
+ "display: none;z-index:100;"
|
|
|
157 |
+ "border: " + String(self.options.borderSize)
|
|
|
158 |
+ "px solid " + self.options.borderColour
|
|
|
159 |
+ ";background-repeat: no-repeat;"
|
|
|
160 |
+ "position: absolute;";
|
|
|
161 |
}
|
|
|
162 |
|
|
|
163 |
|
|
|
164 |
//if inner zoom
|
|
|
165 |
if(self.options.zoomType == "inner") {
|
|
|
166 |
//has a border been put on the image? Lets cater for this
|
|
|
167 |
|
|
|
168 |
var borderWidth = self.$elem.css("border-left-width");
|
|
|
169 |
|
|
|
170 |
self.zoomWindowStyle = "overflow: hidden;"
|
|
|
171 |
+ "margin-left: " + String(borderWidth) + ";"
|
|
|
172 |
+ "margin-top: " + String(borderWidth) + ";"
|
|
|
173 |
+ "background-position: 0px 0px;"
|
|
|
174 |
+ "width: " + String(self.nzWidth) + "px;"
|
|
|
175 |
+ "height: " + String(self.nzHeight)
|
|
|
176 |
+ "px;float: left;"
|
|
|
177 |
+ "display: none;"
|
|
|
178 |
+ "cursor:"+(self.options.cursor)+";"
|
|
|
179 |
+ "px solid " + self.options.borderColour
|
|
|
180 |
+ ";background-repeat: no-repeat;"
|
|
|
181 |
+ "position: absolute;";
|
|
|
182 |
}
|
|
|
183 |
|
|
|
184 |
|
|
|
185 |
|
|
|
186 |
//lens style for window zoom
|
|
|
187 |
if(self.options.zoomType == "window") {
|
|
|
188 |
|
|
|
189 |
|
|
|
190 |
// adjust images less than the window height
|
|
|
191 |
|
|
|
192 |
if(self.nzHeight < self.options.zoomWindowWidth/self.widthRatio){
|
|
|
193 |
lensHeight = self.nzHeight;
|
|
|
194 |
}
|
|
|
195 |
else{
|
|
|
196 |
lensHeight = String((self.options.zoomWindowHeight/self.heightRatio))
|
|
|
197 |
}
|
|
|
198 |
if(self.largeWidth < self.options.zoomWindowWidth){
|
|
|
199 |
lensWidth = self.nzWidth;
|
|
|
200 |
}
|
|
|
201 |
else{
|
|
|
202 |
lensWidth = (self.options.zoomWindowWidth/self.widthRatio);
|
|
|
203 |
}
|
|
|
204 |
|
|
|
205 |
|
|
|
206 |
self.lensStyle = "background-position: 0px 0px;width: " + String((self.options.zoomWindowWidth)/self.widthRatio) + "px;height: " + String((self.options.zoomWindowHeight)/self.heightRatio)
|
|
|
207 |
+ "px;float: right;display: none;"
|
|
|
208 |
+ "overflow: hidden;"
|
|
|
209 |
+ "z-index: 999;"
|
|
|
210 |
+ "-webkit-transform: translateZ(0);"
|
|
|
211 |
+ "opacity:"+(self.options.lensOpacity)+";filter: alpha(opacity = "+(self.options.lensOpacity*100)+"); zoom:1;"
|
|
|
212 |
+ "width:"+lensWidth+"px;"
|
|
|
213 |
+ "height:"+lensHeight+"px;"
|
|
|
214 |
+ "background-color:"+(self.options.lensColour)+";"
|
|
|
215 |
+ "cursor:"+(self.options.cursor)+";"
|
|
|
216 |
+ "border: "+(self.options.lensBorderSize)+"px" +
|
|
|
217 |
" solid "+(self.options.lensBorderColour)+";background-repeat: no-repeat;position: absolute;";
|
|
|
218 |
}
|
|
|
219 |
|
|
|
220 |
|
|
|
221 |
//tint style
|
|
|
222 |
self.tintStyle = "display: block;"
|
|
|
223 |
+ "position: absolute;"
|
|
|
224 |
+ "background-color: "+self.options.tintColour+";"
|
|
|
225 |
+ "filter:alpha(opacity=0);"
|
|
|
226 |
+ "opacity: 0;"
|
|
|
227 |
+ "width: " + self.nzWidth + "px;"
|
|
|
228 |
+ "height: " + self.nzHeight + "px;"
|
|
|
229 |
|
|
|
230 |
;
|
|
|
231 |
|
|
|
232 |
//lens style for lens zoom with optional round for modern browsers
|
|
|
233 |
self.lensRound = '';
|
|
|
234 |
|
|
|
235 |
if(self.options.zoomType == "lens") {
|
|
|
236 |
|
|
|
237 |
self.lensStyle = "background-position: 0px 0px;"
|
|
|
238 |
+ "float: left;display: none;"
|
|
|
239 |
+ "border: " + String(self.options.borderSize) + "px solid " + self.options.borderColour+";"
|
|
|
240 |
+ "width:"+ String(self.options.lensSize) +"px;"
|
|
|
241 |
+ "height:"+ String(self.options.lensSize)+"px;"
|
|
|
242 |
+ "background-repeat: no-repeat;position: absolute;";
|
|
|
243 |
|
|
|
244 |
|
|
|
245 |
}
|
|
|
246 |
|
|
|
247 |
|
|
|
248 |
//does not round in all browsers
|
|
|
249 |
if(self.options.lensShape == "round") {
|
|
|
250 |
self.lensRound = "border-top-left-radius: " + String(self.options.lensSize / 2 + self.options.borderSize) + "px;"
|
|
|
251 |
+ "border-top-right-radius: " + String(self.options.lensSize / 2 + self.options.borderSize) + "px;"
|
|
|
252 |
+ "border-bottom-left-radius: " + String(self.options.lensSize / 2 + self.options.borderSize) + "px;"
|
|
|
253 |
+ "border-bottom-right-radius: " + String(self.options.lensSize / 2 + self.options.borderSize) + "px;";
|
|
|
254 |
|
|
|
255 |
}
|
|
|
256 |
|
|
|
257 |
//create the div's + ""
|
|
|
258 |
//self.zoomContainer = $('<div/>').addClass('zoomContainer').css({"position":"relative", "height":self.nzHeight, "width":self.nzWidth});
|
|
|
259 |
|
|
|
260 |
self.zoomContainer = $('<div class="zoomContainer" style="-webkit-transform: translateZ(0);position:absolute;left:'+self.nzOffset.left+'px;top:'+self.nzOffset.top+'px;height:'+self.nzHeight+'px;width:'+self.nzWidth+'px;"></div>');
|
|
|
261 |
$('body').append(self.zoomContainer);
|
|
|
262 |
|
|
|
263 |
|
|
|
264 |
//this will add overflow hidden and contrain the lens on lens mode
|
|
|
265 |
if(self.options.containLensZoom && self.options.zoomType == "lens"){
|
|
|
266 |
self.zoomContainer.css("overflow", "hidden");
|
|
|
267 |
}
|
|
|
268 |
if(self.options.zoomType != "inner") {
|
|
|
269 |
self.zoomLens = $("<div class='zoomLens' style='" + self.lensStyle + self.lensRound +"'> </div>")
|
|
|
270 |
.appendTo(self.zoomContainer)
|
|
|
271 |
.click(function () {
|
|
|
272 |
self.$elem.trigger('click');
|
|
|
273 |
});
|
|
|
274 |
|
|
|
275 |
|
|
|
276 |
if(self.options.tint) {
|
|
|
277 |
self.tintContainer = $('<div/>').addClass('tintContainer');
|
|
|
278 |
self.zoomTint = $("<div class='zoomTint' style='"+self.tintStyle+"'></div>");
|
|
|
279 |
|
|
|
280 |
|
|
|
281 |
self.zoomLens.wrap(self.tintContainer);
|
|
|
282 |
|
|
|
283 |
|
|
|
284 |
self.zoomTintcss = self.zoomLens.after(self.zoomTint);
|
|
|
285 |
|
|
|
286 |
//if tint enabled - set an image to show over the tint
|
|
|
287 |
|
|
|
288 |
self.zoomTintImage = $('<img style="position: absolute; left: 0px; top: 0px; max-width: none; width: '+self.nzWidth+'px; height: '+self.nzHeight+'px;" src="'+self.imageSrc+'">')
|
|
|
289 |
.appendTo(self.zoomLens)
|
|
|
290 |
.click(function () {
|
|
|
291 |
|
|
|
292 |
self.$elem.trigger('click');
|
|
|
293 |
});
|
|
|
294 |
|
|
|
295 |
}
|
|
|
296 |
|
|
|
297 |
}
|
|
|
298 |
|
|
|
299 |
|
|
|
300 |
|
|
|
301 |
|
|
|
302 |
|
|
|
303 |
|
|
|
304 |
|
|
|
305 |
//create zoom window
|
|
|
306 |
if(isNaN(self.options.zoomWindowPosition)){
|
|
|
307 |
self.zoomWindow = $("<div style='z-index:999;left:"+(self.windowOffsetLeft)+"px;top:"+(self.windowOffsetTop)+"px;" + self.zoomWindowStyle + "' class='zoomWindow'> </div>")
|
|
|
308 |
.appendTo('body')
|
|
|
309 |
.click(function () {
|
|
|
310 |
self.$elem.trigger('click');
|
|
|
311 |
});
|
|
|
312 |
}else{
|
|
|
313 |
self.zoomWindow = $("<div style='z-index:999;left:"+(self.windowOffsetLeft)+"px;top:"+(self.windowOffsetTop)+"px;" + self.zoomWindowStyle + "' class='zoomWindow'> </div>")
|
|
|
314 |
.appendTo(self.zoomContainer)
|
|
|
315 |
.click(function () {
|
|
|
316 |
self.$elem.trigger('click');
|
|
|
317 |
});
|
|
|
318 |
}
|
|
|
319 |
self.zoomWindowContainer = $('<div/>').addClass('zoomWindowContainer').css("width",self.options.zoomWindowWidth);
|
|
|
320 |
self.zoomWindow.wrap(self.zoomWindowContainer);
|
|
|
321 |
|
|
|
322 |
|
|
|
323 |
// self.captionStyle = "text-align: left;background-color: black;color: white;font-weight: bold;padding: 10px;font-family: sans-serif;font-size: 11px";
|
|
|
324 |
// self.zoomCaption = $('<div class="elevatezoom-caption" style="'+self.captionStyle+'display: block; width: 280px;">INSERT ALT TAG</div>').appendTo(self.zoomWindow.parent());
|
|
|
325 |
|
|
|
326 |
if(self.options.zoomType == "lens") {
|
|
|
327 |
self.zoomLens.css({ backgroundImage: "url('" + self.imageSrc + "')" });
|
|
|
328 |
}
|
|
|
329 |
if(self.options.zoomType == "window") {
|
|
|
330 |
self.zoomWindow.css({ backgroundImage: "url('" + self.imageSrc + "')" });
|
|
|
331 |
}
|
|
|
332 |
if(self.options.zoomType == "inner") {
|
|
|
333 |
self.zoomWindow.css({ backgroundImage: "url('" + self.imageSrc + "')" });
|
|
|
334 |
}
|
|
|
335 |
/*-------------------END THE ZOOM WINDOW AND LENS----------------------------------*/
|
|
|
336 |
//touch events
|
|
|
337 |
self.$elem.bind('touchmove', function(e){
|
|
|
338 |
e.preventDefault();
|
|
|
339 |
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
|
|
|
340 |
self.setPosition(touch);
|
|
|
341 |
|
|
|
342 |
});
|
|
|
343 |
self.zoomContainer.bind('touchmove', function(e){
|
|
|
344 |
if(self.options.zoomType == "inner") {
|
|
|
345 |
self.showHideWindow("show");
|
|
|
346 |
|
|
|
347 |
}
|
|
|
348 |
e.preventDefault();
|
|
|
349 |
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
|
|
|
350 |
self.setPosition(touch);
|
|
|
351 |
|
|
|
352 |
});
|
|
|
353 |
self.zoomContainer.bind('touchend', function(e){
|
|
|
354 |
self.showHideWindow("hide");
|
|
|
355 |
if(self.options.showLens) {self.showHideLens("hide");}
|
|
|
356 |
if(self.options.tint && self.options.zoomType != "inner") {self.showHideTint("hide");}
|
|
|
357 |
});
|
|
|
358 |
|
|
|
359 |
self.$elem.bind('touchend', function(e){
|
|
|
360 |
self.showHideWindow("hide");
|
|
|
361 |
if(self.options.showLens) {self.showHideLens("hide");}
|
|
|
362 |
if(self.options.tint && self.options.zoomType != "inner") {self.showHideTint("hide");}
|
|
|
363 |
});
|
|
|
364 |
if(self.options.showLens) {
|
|
|
365 |
self.zoomLens.bind('touchmove', function(e){
|
|
|
366 |
|
|
|
367 |
e.preventDefault();
|
|
|
368 |
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
|
|
|
369 |
self.setPosition(touch);
|
|
|
370 |
});
|
|
|
371 |
|
|
|
372 |
|
|
|
373 |
self.zoomLens.bind('touchend', function(e){
|
|
|
374 |
self.showHideWindow("hide");
|
|
|
375 |
if(self.options.showLens) {self.showHideLens("hide");}
|
|
|
376 |
if(self.options.tint && self.options.zoomType != "inner") {self.showHideTint("hide");}
|
|
|
377 |
});
|
|
|
378 |
}
|
|
|
379 |
//Needed to work in IE
|
|
|
380 |
self.$elem.bind('mousemove', function(e){
|
|
|
381 |
if(self.overWindow == false){self.setElements("show");}
|
|
|
382 |
//make sure on orientation change the setposition is not fired
|
|
|
383 |
if(self.lastX !== e.clientX || self.lastY !== e.clientY){
|
|
|
384 |
self.setPosition(e);
|
|
|
385 |
self.currentLoc = e;
|
|
|
386 |
}
|
|
|
387 |
self.lastX = e.clientX;
|
|
|
388 |
self.lastY = e.clientY;
|
|
|
389 |
|
|
|
390 |
});
|
|
|
391 |
|
|
|
392 |
self.zoomContainer.bind('mousemove', function(e){
|
|
|
393 |
|
|
|
394 |
if(self.overWindow == false){self.setElements("show");}
|
|
|
395 |
|
|
|
396 |
//make sure on orientation change the setposition is not fired
|
|
|
397 |
if(self.lastX !== e.clientX || self.lastY !== e.clientY){
|
|
|
398 |
self.setPosition(e);
|
|
|
399 |
self.currentLoc = e;
|
|
|
400 |
}
|
|
|
401 |
self.lastX = e.clientX;
|
|
|
402 |
self.lastY = e.clientY;
|
|
|
403 |
});
|
|
|
404 |
if(self.options.zoomType != "inner") {
|
|
|
405 |
self.zoomLens.bind('mousemove', function(e){
|
|
|
406 |
//make sure on orientation change the setposition is not fired
|
|
|
407 |
if(self.lastX !== e.clientX || self.lastY !== e.clientY){
|
|
|
408 |
self.setPosition(e);
|
|
|
409 |
self.currentLoc = e;
|
|
|
410 |
}
|
|
|
411 |
self.lastX = e.clientX;
|
|
|
412 |
self.lastY = e.clientY;
|
|
|
413 |
});
|
|
|
414 |
}
|
|
|
415 |
if(self.options.tint && self.options.zoomType != "inner") {
|
|
|
416 |
self.zoomTint.bind('mousemove', function(e){
|
|
|
417 |
//make sure on orientation change the setposition is not fired
|
|
|
418 |
if(self.lastX !== e.clientX || self.lastY !== e.clientY){
|
|
|
419 |
self.setPosition(e);
|
|
|
420 |
self.currentLoc = e;
|
|
|
421 |
}
|
|
|
422 |
self.lastX = e.clientX;
|
|
|
423 |
self.lastY = e.clientY;
|
|
|
424 |
});
|
|
|
425 |
|
|
|
426 |
}
|
|
|
427 |
if(self.options.zoomType == "inner") {
|
|
|
428 |
self.zoomWindow.bind('mousemove', function(e) {
|
|
|
429 |
//self.overWindow = true;
|
|
|
430 |
//make sure on orientation change the setposition is not fired
|
|
|
431 |
if(self.lastX !== e.clientX || self.lastY !== e.clientY){
|
|
|
432 |
self.setPosition(e);
|
|
|
433 |
self.currentLoc = e;
|
|
|
434 |
}
|
|
|
435 |
self.lastX = e.clientX;
|
|
|
436 |
self.lastY = e.clientY;
|
|
|
437 |
});
|
|
|
438 |
|
|
|
439 |
}
|
|
|
440 |
|
|
|
441 |
|
|
|
442 |
// lensFadeOut: 500, zoomTintFadeIn
|
|
|
443 |
self.zoomContainer.add(self.$elem).mouseenter(function(){
|
|
|
444 |
|
|
|
445 |
if(self.overWindow == false){self.setElements("show");}
|
|
|
446 |
|
|
|
447 |
|
|
|
448 |
}).mouseleave(function(){
|
|
|
449 |
if(!self.scrollLock){
|
|
|
450 |
self.setElements("hide");
|
|
|
451 |
}
|
|
|
452 |
});
|
|
|
453 |
//end ove image
|
|
|
454 |
|
|
|
455 |
|
|
|
456 |
|
|
|
457 |
|
|
|
458 |
|
|
|
459 |
if(self.options.zoomType != "inner") {
|
|
|
460 |
self.zoomWindow.mouseenter(function(){
|
|
|
461 |
self.overWindow = true;
|
|
|
462 |
self.setElements("hide");
|
|
|
463 |
}).mouseleave(function(){
|
|
|
464 |
|
|
|
465 |
self.overWindow = false;
|
|
|
466 |
});
|
|
|
467 |
}
|
|
|
468 |
//end ove image
|
|
|
469 |
|
|
|
470 |
|
|
|
471 |
|
|
|
472 |
// var delta = parseInt(e.originalEvent.wheelDelta || -e.originalEvent.detail);
|
|
|
473 |
|
|
|
474 |
// $(this).empty();
|
|
|
475 |
// return false;
|
|
|
476 |
|
|
|
477 |
//fix for initial zoom setting
|
|
|
478 |
if (self.options.zoomLevel != 1){
|
|
|
479 |
// self.changeZoomLevel(self.currentZoomLevel);
|
|
|
480 |
}
|
|
|
481 |
//set the min zoomlevel
|
|
|
482 |
if(self.options.minZoomLevel){
|
|
|
483 |
self.minZoomLevel = self.options.minZoomLevel;
|
|
|
484 |
}
|
|
|
485 |
else{
|
|
|
486 |
self.minZoomLevel = self.options.scrollZoomIncrement * 2;
|
|
|
487 |
}
|
|
|
488 |
|
|
|
489 |
|
|
|
490 |
if(self.options.scrollZoom){
|
|
|
491 |
|
|
|
492 |
|
|
|
493 |
self.zoomContainer.add(self.$elem).bind('mousewheel DOMMouseScroll MozMousePixelScroll', function(e){
|
|
|
494 |
|
|
|
495 |
|
|
|
496 |
// in IE there is issue with firing of mouseleave - So check whether still scrolling
|
|
|
497 |
// and on mouseleave check if scrolllock
|
|
|
498 |
self.scrollLock = true;
|
|
|
499 |
clearTimeout($.data(this, 'timer'));
|
|
|
500 |
$.data(this, 'timer', setTimeout(function() {
|
|
|
501 |
self.scrollLock = false;
|
|
|
502 |
//do something
|
|
|
503 |
}, 250));
|
|
|
504 |
|
|
|
505 |
var theEvent = e.originalEvent.wheelDelta || e.originalEvent.detail*-1
|
|
|
506 |
|
|
|
507 |
|
|
|
508 |
//this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
|
|
|
509 |
// e.preventDefault();
|
|
|
510 |
|
|
|
511 |
|
|
|
512 |
e.stopImmediatePropagation();
|
|
|
513 |
e.stopPropagation();
|
|
|
514 |
e.preventDefault();
|
|
|
515 |
|
|
|
516 |
|
|
|
517 |
if(theEvent /120 > 0) {
|
|
|
518 |
//scrolling up
|
|
|
519 |
if(self.currentZoomLevel >= self.minZoomLevel){
|
|
|
520 |
self.changeZoomLevel(self.currentZoomLevel-self.options.scrollZoomIncrement);
|
|
|
521 |
}
|
|
|
522 |
|
|
|
523 |
}
|
|
|
524 |
else{
|
|
|
525 |
//scrolling down
|
|
|
526 |
|
|
|
527 |
|
|
|
528 |
if(self.options.maxZoomLevel){
|
|
|
529 |
if(self.currentZoomLevel <= self.options.maxZoomLevel){
|
|
|
530 |
self.changeZoomLevel(parseFloat(self.currentZoomLevel)+self.options.scrollZoomIncrement);
|
|
|
531 |
}
|
|
|
532 |
}
|
|
|
533 |
else{
|
|
|
534 |
//andy
|
|
|
535 |
|
|
|
536 |
self.changeZoomLevel(parseFloat(self.currentZoomLevel)+self.options.scrollZoomIncrement);
|
|
|
537 |
}
|
|
|
538 |
|
|
|
539 |
}
|
|
|
540 |
return false;
|
|
|
541 |
});
|
|
|
542 |
}
|
|
|
543 |
|
|
|
544 |
|
|
|
545 |
},
|
|
|
546 |
setElements: function(type) {
|
|
|
547 |
var self = this;
|
|
|
548 |
if(!self.options.zoomEnabled){return false;}
|
|
|
549 |
if(type=="show"){
|
|
|
550 |
if(self.isWindowSet){
|
|
|
551 |
if(self.options.zoomType == "inner") {self.showHideWindow("show");}
|
|
|
552 |
if(self.options.zoomType == "window") {self.showHideWindow("show");}
|
|
|
553 |
if(self.options.showLens) {self.showHideLens("show");}
|
|
|
554 |
if(self.options.tint && self.options.zoomType != "inner") {self.showHideTint("show");
|
|
|
555 |
}
|
|
|
556 |
}
|
|
|
557 |
}
|
|
|
558 |
|
|
|
559 |
if(type=="hide"){
|
|
|
560 |
if(self.options.zoomType == "window") {self.showHideWindow("hide");}
|
|
|
561 |
if(!self.options.tint) {self.showHideWindow("hide");}
|
|
|
562 |
if(self.options.showLens) {self.showHideLens("hide");}
|
|
|
563 |
if(self.options.tint) { self.showHideTint("hide");}
|
|
|
564 |
}
|
|
|
565 |
},
|
|
|
566 |
setPosition: function(e) {
|
|
|
567 |
|
|
|
568 |
var self = this;
|
|
|
569 |
|
|
|
570 |
if(!self.options.zoomEnabled){return false;}
|
|
|
571 |
|
|
|
572 |
//recaclc offset each time in case the image moves
|
|
|
573 |
//this can be caused by other on page elements
|
|
|
574 |
self.nzHeight = self.$elem.height();
|
|
|
575 |
self.nzWidth = self.$elem.width();
|
|
|
576 |
self.nzOffset = self.$elem.offset();
|
|
|
577 |
|
|
|
578 |
if(self.options.tint && self.options.zoomType != "inner") {
|
|
|
579 |
self.zoomTint.css({ top: 0});
|
|
|
580 |
self.zoomTint.css({ left: 0});
|
|
|
581 |
}
|
|
|
582 |
//set responsive
|
|
|
583 |
//will checking if the image needs changing before running this code work faster?
|
|
|
584 |
if(self.options.responsive && !self.options.scrollZoom){
|
|
|
585 |
if(self.options.showLens){
|
|
|
586 |
if(self.nzHeight < self.options.zoomWindowWidth/self.widthRatio){
|
|
|
587 |
lensHeight = self.nzHeight;
|
|
|
588 |
}
|
|
|
589 |
else{
|
|
|
590 |
lensHeight = String((self.options.zoomWindowHeight/self.heightRatio))
|
|
|
591 |
}
|
|
|
592 |
if(self.largeWidth < self.options.zoomWindowWidth){
|
|
|
593 |
lensWidth = self.nzWidth;
|
|
|
594 |
}
|
|
|
595 |
else{
|
|
|
596 |
lensWidth = (self.options.zoomWindowWidth/self.widthRatio);
|
|
|
597 |
}
|
|
|
598 |
self.widthRatio = self.largeWidth / self.nzWidth;
|
|
|
599 |
self.heightRatio = self.largeHeight / self.nzHeight;
|
|
|
600 |
if(self.options.zoomType != "lens") {
|
|
|
601 |
|
|
|
602 |
|
|
|
603 |
//possibly dont need to keep recalcalculating
|
|
|
604 |
//if the lens is heigher than the image, then set lens size to image size
|
|
|
605 |
if(self.nzHeight < self.options.zoomWindowWidth/self.widthRatio){
|
|
|
606 |
lensHeight = self.nzHeight;
|
|
|
607 |
|
|
|
608 |
}
|
|
|
609 |
else{
|
|
|
610 |
lensHeight = String((self.options.zoomWindowHeight/self.heightRatio))
|
|
|
611 |
}
|
|
|
612 |
|
|
|
613 |
if(self.options.zoomWindowWidth < self.options.zoomWindowWidth){
|
|
|
614 |
lensWidth = self.nzWidth;
|
|
|
615 |
}
|
|
|
616 |
else{
|
|
|
617 |
lensWidth = (self.options.zoomWindowWidth/self.widthRatio);
|
|
|
618 |
}
|
|
|
619 |
|
|
|
620 |
self.zoomLens.css('width', lensWidth);
|
|
|
621 |
self.zoomLens.css('height', lensHeight);
|
|
|
622 |
|
|
|
623 |
if(self.options.tint){
|
|
|
624 |
self.zoomTintImage.css('width', self.nzWidth);
|
|
|
625 |
self.zoomTintImage.css('height', self.nzHeight);
|
|
|
626 |
}
|
|
|
627 |
|
|
|
628 |
}
|
|
|
629 |
if(self.options.zoomType == "lens") {
|
|
|
630 |
|
|
|
631 |
self.zoomLens.css({ width: String(self.options.lensSize) + 'px', height: String(self.options.lensSize) + 'px' })
|
|
|
632 |
|
|
|
633 |
|
|
|
634 |
}
|
|
|
635 |
//end responsive image change
|
|
|
636 |
}
|
|
|
637 |
}
|
|
|
638 |
|
|
|
639 |
//container fix
|
|
|
640 |
self.zoomContainer.css({ top: self.nzOffset.top});
|
|
|
641 |
self.zoomContainer.css({ left: self.nzOffset.left});
|
|
|
642 |
self.mouseLeft = parseInt(e.pageX - self.nzOffset.left);
|
|
|
643 |
self.mouseTop = parseInt(e.pageY - self.nzOffset.top);
|
|
|
644 |
//calculate the Location of the Lens
|
|
|
645 |
|
|
|
646 |
//calculate the bound regions - but only if zoom window
|
|
|
647 |
if(self.options.zoomType == "window") {
|
|
|
648 |
self.Etoppos = (self.mouseTop < (self.zoomLens.height()/2));
|
|
|
649 |
self.Eboppos = (self.mouseTop > self.nzHeight - (self.zoomLens.height()/2)-(self.options.lensBorderSize*2));
|
|
|
650 |
self.Eloppos = (self.mouseLeft < 0+((self.zoomLens.width()/2)));
|
|
|
651 |
self.Eroppos = (self.mouseLeft > (self.nzWidth - (self.zoomLens.width()/2)-(self.options.lensBorderSize*2)));
|
|
|
652 |
}
|
|
|
653 |
//calculate the bound regions - but only for inner zoom
|
|
|
654 |
if(self.options.zoomType == "inner"){
|
|
|
655 |
self.Etoppos = (self.mouseTop < ((self.nzHeight/2)/self.heightRatio) );
|
|
|
656 |
self.Eboppos = (self.mouseTop > (self.nzHeight - ((self.nzHeight/2)/self.heightRatio)));
|
|
|
657 |
self.Eloppos = (self.mouseLeft < 0+(((self.nzWidth/2)/self.widthRatio)));
|
|
|
658 |
self.Eroppos = (self.mouseLeft > (self.nzWidth - (self.nzWidth/2)/self.widthRatio-(self.options.lensBorderSize*2)));
|
|
|
659 |
}
|
|
|
660 |
|
|
|
661 |
// if the mouse position of the slider is one of the outerbounds, then hide window and lens
|
|
|
662 |
if (self.mouseLeft <= 0 || self.mouseTop < 0 || self.mouseLeft > self.nzWidth || self.mouseTop > self.nzHeight ) {
|
|
|
663 |
self.setElements("hide");
|
|
|
664 |
return;
|
|
|
665 |
}
|
|
|
666 |
//else continue with operations
|
|
|
667 |
else {
|
|
|
668 |
|
|
|
669 |
|
|
|
670 |
//lens options
|
|
|
671 |
if(self.options.showLens) {
|
|
|
672 |
// self.showHideLens("show");
|
|
|
673 |
//set background position of lens
|
|
|
674 |
self.lensLeftPos = String(self.mouseLeft - self.zoomLens.width() / 2);
|
|
|
675 |
self.lensTopPos = String(self.mouseTop - self.zoomLens.height() / 2);
|
|
|
676 |
|
|
|
677 |
|
|
|
678 |
}
|
|
|
679 |
//adjust the background position if the mouse is in one of the outer regions
|
|
|
680 |
|
|
|
681 |
//Top region
|
|
|
682 |
if(self.Etoppos){
|
|
|
683 |
self.lensTopPos = 0;
|
|
|
684 |
}
|
|
|
685 |
//Left Region
|
|
|
686 |
if(self.Eloppos){
|
|
|
687 |
self.windowLeftPos = 0;
|
|
|
688 |
self.lensLeftPos = 0;
|
|
|
689 |
self.tintpos=0;
|
|
|
690 |
}
|
|
|
691 |
//Set bottom and right region for window mode
|
|
|
692 |
if(self.options.zoomType == "window") {
|
|
|
693 |
if(self.Eboppos){
|
|
|
694 |
self.lensTopPos = Math.max( (self.nzHeight)-self.zoomLens.height()-(self.options.lensBorderSize*2), 0 );
|
|
|
695 |
}
|
|
|
696 |
if(self.Eroppos){
|
|
|
697 |
self.lensLeftPos = (self.nzWidth-(self.zoomLens.width())-(self.options.lensBorderSize*2));
|
|
|
698 |
}
|
|
|
699 |
}
|
|
|
700 |
//Set bottom and right region for inner mode
|
|
|
701 |
if(self.options.zoomType == "inner") {
|
|
|
702 |
if(self.Eboppos){
|
|
|
703 |
self.lensTopPos = Math.max( ((self.nzHeight)-(self.options.lensBorderSize*2)), 0 );
|
|
|
704 |
}
|
|
|
705 |
if(self.Eroppos){
|
|
|
706 |
self.lensLeftPos = (self.nzWidth-(self.nzWidth)-(self.options.lensBorderSize*2));
|
|
|
707 |
}
|
|
|
708 |
|
|
|
709 |
}
|
|
|
710 |
//if lens zoom
|
|
|
711 |
if(self.options.zoomType == "lens") {
|
|
|
712 |
self.windowLeftPos = String(((e.pageX - self.nzOffset.left) * self.widthRatio - self.zoomLens.width() / 2) * (-1));
|
|
|
713 |
self.windowTopPos = String(((e.pageY - self.nzOffset.top) * self.heightRatio - self.zoomLens.height() / 2) * (-1));
|
|
|
714 |
|
|
|
715 |
self.zoomLens.css({ backgroundPosition: self.windowLeftPos + 'px ' + self.windowTopPos + 'px' });
|
|
|
716 |
|
|
|
717 |
if(self.changeBgSize){
|
|
|
718 |
|
|
|
719 |
if(self.nzHeight>self.nzWidth){
|
|
|
720 |
if(self.options.zoomType == "lens"){
|
|
|
721 |
self.zoomLens.css({ "background-size": self.largeWidth/self.newvalueheight + 'px ' + self.largeHeight/self.newvalueheight + 'px' });
|
|
|
722 |
}
|
|
|
723 |
|
|
|
724 |
self.zoomWindow.css({ "background-size": self.largeWidth/self.newvalueheight + 'px ' + self.largeHeight/self.newvalueheight + 'px' });
|
|
|
725 |
}
|
|
|
726 |
else{
|
|
|
727 |
if(self.options.zoomType == "lens"){
|
|
|
728 |
self.zoomLens.css({ "background-size": self.largeWidth/self.newvaluewidth + 'px ' + self.largeHeight/self.newvaluewidth + 'px' });
|
|
|
729 |
}
|
|
|
730 |
self.zoomWindow.css({ "background-size": self.largeWidth/self.newvaluewidth + 'px ' + self.largeHeight/self.newvaluewidth + 'px' });
|
|
|
731 |
}
|
|
|
732 |
self.changeBgSize = false;
|
|
|
733 |
}
|
|
|
734 |
|
|
|
735 |
self.setWindowPostition(e);
|
|
|
736 |
}
|
|
|
737 |
//if tint zoom
|
|
|
738 |
if(self.options.tint && self.options.zoomType != "inner") {
|
|
|
739 |
self.setTintPosition(e);
|
|
|
740 |
|
|
|
741 |
}
|
|
|
742 |
//set the css background position
|
|
|
743 |
if(self.options.zoomType == "window") {
|
|
|
744 |
self.setWindowPostition(e);
|
|
|
745 |
}
|
|
|
746 |
if(self.options.zoomType == "inner") {
|
|
|
747 |
self.setWindowPostition(e);
|
|
|
748 |
}
|
|
|
749 |
if(self.options.showLens) {
|
|
|
750 |
|
|
|
751 |
if(self.fullwidth && self.options.zoomType != "lens"){
|
|
|
752 |
self.lensLeftPos = 0;
|
|
|
753 |
|
|
|
754 |
}
|
|
|
755 |
self.zoomLens.css({ left: self.lensLeftPos + 'px', top: self.lensTopPos + 'px' })
|
|
|
756 |
}
|
|
|
757 |
|
|
|
758 |
} //end else
|
|
|
759 |
|
|
|
760 |
|
|
|
761 |
|
|
|
762 |
},
|
|
|
763 |
showHideWindow: function(change) {
|
|
|
764 |
var self = this;
|
|
|
765 |
if(change == "show"){
|
|
|
766 |
if(!self.isWindowActive){
|
|
|
767 |
if(self.options.zoomWindowFadeIn){
|
|
|
768 |
self.zoomWindow.stop(true, true, false).fadeIn(self.options.zoomWindowFadeIn);
|
|
|
769 |
}
|
|
|
770 |
else{self.zoomWindow.show();}
|
|
|
771 |
self.isWindowActive = true;
|
|
|
772 |
}
|
|
|
773 |
}
|
|
|
774 |
if(change == "hide"){
|
|
|
775 |
if(self.isWindowActive){
|
|
|
776 |
if(self.options.zoomWindowFadeOut){
|
|
|
777 |
self.zoomWindow.stop(true, true).fadeOut(self.options.zoomWindowFadeOut);
|
|
|
778 |
}
|
|
|
779 |
else{self.zoomWindow.hide();}
|
|
|
780 |
self.isWindowActive = false;
|
|
|
781 |
}
|
|
|
782 |
}
|
|
|
783 |
},
|
|
|
784 |
showHideLens: function(change) {
|
|
|
785 |
var self = this;
|
|
|
786 |
if(change == "show"){
|
|
|
787 |
if(!self.isLensActive){
|
|
|
788 |
if(self.options.lensFadeIn){
|
|
|
789 |
self.zoomLens.stop(true, true, false).fadeIn(self.options.lensFadeIn);
|
|
|
790 |
}
|
|
|
791 |
else{self.zoomLens.show();}
|
|
|
792 |
self.isLensActive = true;
|
|
|
793 |
}
|
|
|
794 |
}
|
|
|
795 |
if(change == "hide"){
|
|
|
796 |
if(self.isLensActive){
|
|
|
797 |
if(self.options.lensFadeOut){
|
|
|
798 |
self.zoomLens.stop(true, true).fadeOut(self.options.lensFadeOut);
|
|
|
799 |
}
|
|
|
800 |
else{self.zoomLens.hide();}
|
|
|
801 |
self.isLensActive = false;
|
|
|
802 |
}
|
|
|
803 |
}
|
|
|
804 |
},
|
|
|
805 |
showHideTint: function(change) {
|
|
|
806 |
var self = this;
|
|
|
807 |
if(change == "show"){
|
|
|
808 |
if(!self.isTintActive){
|
|
|
809 |
|
|
|
810 |
if(self.options.zoomTintFadeIn){
|
|
|
811 |
self.zoomTint.css({opacity:self.options.tintOpacity}).animate().stop(true, true).fadeIn("slow");
|
|
|
812 |
}
|
|
|
813 |
else{
|
|
|
814 |
self.zoomTint.css({opacity:self.options.tintOpacity}).animate();
|
|
|
815 |
self.zoomTint.show();
|
|
|
816 |
|
|
|
817 |
|
|
|
818 |
}
|
|
|
819 |
self.isTintActive = true;
|
|
|
820 |
}
|
|
|
821 |
}
|
|
|
822 |
if(change == "hide"){
|
|
|
823 |
if(self.isTintActive){
|
|
|
824 |
|
|
|
825 |
if(self.options.zoomTintFadeOut){
|
|
|
826 |
self.zoomTint.stop(true, true).fadeOut(self.options.zoomTintFadeOut);
|
|
|
827 |
}
|
|
|
828 |
else{self.zoomTint.hide();}
|
|
|
829 |
self.isTintActive = false;
|
|
|
830 |
}
|
|
|
831 |
}
|
|
|
832 |
},
|
|
|
833 |
setLensPostition: function( e ) {
|
|
|
834 |
|
|
|
835 |
|
|
|
836 |
},
|
|
|
837 |
setWindowPostition: function( e ) {
|
|
|
838 |
//return obj.slice( 0, count );
|
|
|
839 |
var self = this;
|
|
|
840 |
|
|
|
841 |
if(!isNaN(self.options.zoomWindowPosition)){
|
|
|
842 |
|
|
|
843 |
switch (self.options.zoomWindowPosition) {
|
|
|
844 |
case 1: //done
|
|
|
845 |
self.windowOffsetTop = (self.options.zoomWindowOffety);//DONE - 1
|
|
|
846 |
self.windowOffsetLeft =(+self.nzWidth); //DONE 1, 2, 3, 4, 16
|
|
|
847 |
break;
|
|
|
848 |
case 2:
|
|
|
849 |
if(self.options.zoomWindowHeight > self.nzHeight){ //positive margin
|
|
|
850 |
|
|
|
851 |
self.windowOffsetTop = ((self.options.zoomWindowHeight/2)-(self.nzHeight/2))*(-1);
|
|
|
852 |
self.windowOffsetLeft =(self.nzWidth); //DONE 1, 2, 3, 4, 16
|
|
|
853 |
}
|
|
|
854 |
else{ //negative margin
|
|
|
855 |
|
|
|
856 |
}
|
|
|
857 |
break;
|
|
|
858 |
case 3: //done
|
|
|
859 |
self.windowOffsetTop = (self.nzHeight - self.zoomWindow.height() - (self.options.borderSize*2)); //DONE 3,9
|
|
|
860 |
self.windowOffsetLeft =(self.nzWidth); //DONE 1, 2, 3, 4, 16
|
|
|
861 |
break;
|
|
|
862 |
case 4: //done
|
|
|
863 |
self.windowOffsetTop = (self.nzHeight); //DONE - 4,5,6,7,8
|
|
|
864 |
self.windowOffsetLeft =(self.nzWidth); //DONE 1, 2, 3, 4, 16
|
|
|
865 |
break;
|
|
|
866 |
case 5: //done
|
|
|
867 |
self.windowOffsetTop = (self.nzHeight); //DONE - 4,5,6,7,8
|
|
|
868 |
self.windowOffsetLeft =(self.nzWidth-self.zoomWindow.width()-(self.options.borderSize*2)); //DONE - 5,15
|
|
|
869 |
break;
|
|
|
870 |
case 6:
|
|
|
871 |
if(self.options.zoomWindowHeight > self.nzHeight){ //positive margin
|
|
|
872 |
self.windowOffsetTop = (self.nzHeight); //DONE - 4,5,6,7,8
|
|
|
873 |
|
|
|
874 |
self.windowOffsetLeft =((self.options.zoomWindowWidth/2)-(self.nzWidth/2)+(self.options.borderSize*2))*(-1);
|
|
|
875 |
}
|
|
|
876 |
else{ //negative margin
|
|
|
877 |
|
|
|
878 |
}
|
|
|
879 |
|
|
|
880 |
|
|
|
881 |
break;
|
|
|
882 |
case 7: //done
|
|
|
883 |
self.windowOffsetTop = (self.nzHeight); //DONE - 4,5,6,7,8
|
|
|
884 |
self.windowOffsetLeft = 0; //DONE 7, 13
|
|
|
885 |
break;
|
|
|
886 |
case 8: //done
|
|
|
887 |
self.windowOffsetTop = (self.nzHeight); //DONE - 4,5,6,7,8
|
|
|
888 |
self.windowOffsetLeft =(self.zoomWindow.width()+(self.options.borderSize*2) )* (-1); //DONE 8,9,10,11,12
|
|
|
889 |
break;
|
|
|
890 |
case 9: //done
|
|
|
891 |
self.windowOffsetTop = (self.nzHeight - self.zoomWindow.height() - (self.options.borderSize*2)); //DONE 3,9
|
|
|
892 |
self.windowOffsetLeft =(self.zoomWindow.width()+(self.options.borderSize*2) )* (-1); //DONE 8,9,10,11,12
|
|
|
893 |
break;
|
|
|
894 |
case 10:
|
|
|
895 |
if(self.options.zoomWindowHeight > self.nzHeight){ //positive margin
|
|
|
896 |
|
|
|
897 |
self.windowOffsetTop = ((self.options.zoomWindowHeight/2)-(self.nzHeight/2))*(-1);
|
|
|
898 |
self.windowOffsetLeft =(self.zoomWindow.width()+(self.options.borderSize*2) )* (-1); //DONE 8,9,10,11,12
|
|
|
899 |
}
|
|
|
900 |
else{ //negative margin
|
|
|
901 |
|
|
|
902 |
}
|
|
|
903 |
break;
|
|
|
904 |
case 11:
|
|
|
905 |
self.windowOffsetTop = (self.options.zoomWindowOffety);
|
|
|
906 |
self.windowOffsetLeft =(self.zoomWindow.width()+(self.options.borderSize*2) )* (-1); //DONE 8,9,10,11,12
|
|
|
907 |
break;
|
|
|
908 |
case 12: //done
|
|
|
909 |
self.windowOffsetTop = (self.zoomWindow.height()+(self.options.borderSize*2))*(-1); //DONE 12,13,14,15,16
|
|
|
910 |
self.windowOffsetLeft =(self.zoomWindow.width()+(self.options.borderSize*2) )* (-1); //DONE 8,9,10,11,12
|
|
|
911 |
break;
|
|
|
912 |
case 13: //done
|
|
|
913 |
self.windowOffsetTop = (self.zoomWindow.height()+(self.options.borderSize*2))*(-1); //DONE 12,13,14,15,16
|
|
|
914 |
self.windowOffsetLeft =(0); //DONE 7, 13
|
|
|
915 |
break;
|
|
|
916 |
case 14:
|
|
|
917 |
if(self.options.zoomWindowHeight > self.nzHeight){ //positive margin
|
|
|
918 |
self.windowOffsetTop = (self.zoomWindow.height()+(self.options.borderSize*2))*(-1); //DONE 12,13,14,15,16
|
|
|
919 |
|
|
|
920 |
self.windowOffsetLeft =((self.options.zoomWindowWidth/2)-(self.nzWidth/2)+(self.options.borderSize*2))*(-1);
|
|
|
921 |
}
|
|
|
922 |
else{ //negative margin
|
|
|
923 |
|
|
|
924 |
}
|
|
|
925 |
|
|
|
926 |
break;
|
|
|
927 |
case 15://done
|
|
|
928 |
self.windowOffsetTop = (self.zoomWindow.height()+(self.options.borderSize*2))*(-1); //DONE 12,13,14,15,16
|
|
|
929 |
self.windowOffsetLeft =(self.nzWidth-self.zoomWindow.width()-(self.options.borderSize*2)); //DONE - 5,15
|
|
|
930 |
break;
|
|
|
931 |
case 16: //done
|
|
|
932 |
self.windowOffsetTop = (self.zoomWindow.height()+(self.options.borderSize*2))*(-1); //DONE 12,13,14,15,16
|
|
|
933 |
self.windowOffsetLeft =(self.nzWidth); //DONE 1, 2, 3, 4, 16
|
|
|
934 |
break;
|
|
|
935 |
default: //done
|
|
|
936 |
self.windowOffsetTop = (self.options.zoomWindowOffety);//DONE - 1
|
|
|
937 |
self.windowOffsetLeft =(self.nzWidth); //DONE 1, 2, 3, 4, 16
|
|
|
938 |
}
|
|
|
939 |
} //end isNAN
|
|
|
940 |
else{
|
|
|
941 |
//WE CAN POSITION IN A CLASS - ASSUME THAT ANY STRING PASSED IS
|
|
|
942 |
self.externalContainer = $('#'+self.options.zoomWindowPosition);
|
|
|
943 |
self.externalContainerWidth = self.externalContainer.width();
|
|
|
944 |
self.externalContainerHeight = self.externalContainer.height();
|
|
|
945 |
self.externalContainerOffset = self.externalContainer.offset();
|
|
|
946 |
|
|
|
947 |
self.windowOffsetTop = self.externalContainerOffset.top;//DONE - 1
|
|
|
948 |
self.windowOffsetLeft =self.externalContainerOffset.left; //DONE 1, 2, 3, 4, 16
|
|
|
949 |
|
|
|
950 |
}
|
|
|
951 |
self.isWindowSet = true;
|
|
|
952 |
self.windowOffsetTop = self.windowOffsetTop + self.options.zoomWindowOffety;
|
|
|
953 |
self.windowOffsetLeft = self.windowOffsetLeft + self.options.zoomWindowOffetx;
|
|
|
954 |
|
|
|
955 |
self.zoomWindow.css({ top: self.windowOffsetTop});
|
|
|
956 |
self.zoomWindow.css({ left: self.windowOffsetLeft});
|
|
|
957 |
|
|
|
958 |
if(self.options.zoomType == "inner") {
|
|
|
959 |
self.zoomWindow.css({ top: 0});
|
|
|
960 |
self.zoomWindow.css({ left: 0});
|
|
|
961 |
|
|
|
962 |
}
|
|
|
963 |
|
|
|
964 |
|
|
|
965 |
self.windowLeftPos = String(((e.pageX - self.nzOffset.left) * self.widthRatio - self.zoomWindow.width() / 2) * (-1));
|
|
|
966 |
self.windowTopPos = String(((e.pageY - self.nzOffset.top) * self.heightRatio - self.zoomWindow.height() / 2) * (-1));
|
|
|
967 |
if(self.Etoppos){self.windowTopPos = 0;}
|
|
|
968 |
if(self.Eloppos){self.windowLeftPos = 0;}
|
|
|
969 |
if(self.Eboppos){self.windowTopPos = (self.largeHeight/self.currentZoomLevel-self.zoomWindow.height())*(-1); }
|
|
|
970 |
if(self.Eroppos){self.windowLeftPos = ((self.largeWidth/self.currentZoomLevel-self.zoomWindow.width())*(-1));}
|
|
|
971 |
|
|
|
972 |
//stops micro movements
|
|
|
973 |
if(self.fullheight){
|
|
|
974 |
self.windowTopPos = 0;
|
|
|
975 |
|
|
|
976 |
}
|
|
|
977 |
if(self.fullwidth){
|
|
|
978 |
self.windowLeftPos = 0;
|
|
|
979 |
|
|
|
980 |
}
|
|
|
981 |
//set the css background position
|
|
|
982 |
|
|
|
983 |
|
|
|
984 |
if(self.options.zoomType == "window" || self.options.zoomType == "inner") {
|
|
|
985 |
|
|
|
986 |
if(self.zoomLock == 1){
|
|
|
987 |
//overrides for images not zoomable
|
|
|
988 |
if(self.widthRatio <= 1){
|
|
|
989 |
|
|
|
990 |
self.windowLeftPos = 0;
|
|
|
991 |
}
|
|
|
992 |
if(self.heightRatio <= 1){
|
|
|
993 |
self.windowTopPos = 0;
|
|
|
994 |
}
|
|
|
995 |
}
|
|
|
996 |
// adjust images less than the window height
|
|
|
997 |
|
|
|
998 |
if(self.largeHeight < self.options.zoomWindowHeight){
|
|
|
999 |
|
|
|
1000 |
self.windowTopPos = 0;
|
|
|
1001 |
}
|
|
|
1002 |
if(self.largeWidth < self.options.zoomWindowWidth){
|
|
|
1003 |
self.windowLeftPos = 0;
|
|
|
1004 |
}
|
|
|
1005 |
|
|
|
1006 |
//set the zoomwindow background position
|
|
|
1007 |
if (self.options.easing){
|
|
|
1008 |
|
|
|
1009 |
// if(self.changeZoom){
|
|
|
1010 |
// clearInterval(self.loop);
|
|
|
1011 |
// self.changeZoom = false;
|
|
|
1012 |
// self.loop = false;
|
|
|
1013 |
|
|
|
1014 |
// }
|
|
|
1015 |
//set the pos to 0 if not set
|
|
|
1016 |
if(!self.xp){self.xp = 0;}
|
|
|
1017 |
if(!self.yp){self.yp = 0;}
|
|
|
1018 |
//if loop not already started, then run it
|
|
|
1019 |
if (!self.loop){
|
|
|
1020 |
self.loop = setInterval(function(){
|
|
|
1021 |
//using zeno's paradox
|
|
|
1022 |
|
|
|
1023 |
self.xp += (self.windowLeftPos - self.xp) / self.options.easingAmount;
|
|
|
1024 |
self.yp += (self.windowTopPos - self.yp) / self.options.easingAmount;
|
|
|
1025 |
if(self.scrollingLock){
|
|
|
1026 |
|
|
|
1027 |
|
|
|
1028 |
clearInterval(self.loop);
|
|
|
1029 |
self.xp = self.windowLeftPos;
|
|
|
1030 |
self.yp = self.windowTopPos
|
|
|
1031 |
|
|
|
1032 |
self.xp = ((e.pageX - self.nzOffset.left) * self.widthRatio - self.zoomWindow.width() / 2) * (-1);
|
|
|
1033 |
self.yp = (((e.pageY - self.nzOffset.top) * self.heightRatio - self.zoomWindow.height() / 2) * (-1));
|
|
|
1034 |
|
|
|
1035 |
if(self.changeBgSize){
|
|
|
1036 |
if(self.nzHeight>self.nzWidth){
|
|
|
1037 |
if(self.options.zoomType == "lens"){
|
|
|
1038 |
self.zoomLens.css({ "background-size": self.largeWidth/self.newvalueheight + 'px ' + self.largeHeight/self.newvalueheight + 'px' });
|
|
|
1039 |
}
|
|
|
1040 |
self.zoomWindow.css({ "background-size": self.largeWidth/self.newvalueheight + 'px ' + self.largeHeight/self.newvalueheight + 'px' });
|
|
|
1041 |
}
|
|
|
1042 |
else{
|
|
|
1043 |
if(self.options.zoomType == "lens"){
|
|
|
1044 |
self.zoomLens.css({ "background-size": self.largeWidth/self.newvaluewidth + 'px ' + self.largeHeight/self.newvalueheight + 'px' });
|
|
|
1045 |
}
|
|
|
1046 |
self.zoomWindow.css({ "background-size": self.largeWidth/self.newvaluewidth + 'px ' + self.largeHeight/self.newvaluewidth + 'px' });
|
|
|
1047 |
|
|
|
1048 |
}
|
|
|
1049 |
|
|
|
1050 |
/*
|
|
|
1051 |
if(!self.bgxp){self.bgxp = self.largeWidth/self.newvalue;}
|
|
|
1052 |
if(!self.bgyp){self.bgyp = self.largeHeight/self.newvalue ;}
|
|
|
1053 |
if (!self.bgloop){
|
|
|
1054 |
self.bgloop = setInterval(function(){
|
|
|
1055 |
|
|
|
1056 |
self.bgxp += (self.largeWidth/self.newvalue - self.bgxp) / self.options.easingAmount;
|
|
|
1057 |
self.bgyp += (self.largeHeight/self.newvalue - self.bgyp) / self.options.easingAmount;
|
|
|
1058 |
|
|
|
1059 |
self.zoomWindow.css({ "background-size": self.bgxp + 'px ' + self.bgyp + 'px' });
|
|
|
1060 |
|
|
|
1061 |
|
|
|
1062 |
}, 16);
|
|
|
1063 |
|
|
|
1064 |
}
|
|
|
1065 |
*/
|
|
|
1066 |
self.changeBgSize = false;
|
|
|
1067 |
}
|
|
|
1068 |
|
|
|
1069 |
self.zoomWindow.css({ backgroundPosition: self.windowLeftPos + 'px ' + self.windowTopPos + 'px' });
|
|
|
1070 |
self.scrollingLock = false;
|
|
|
1071 |
self.loop = false;
|
|
|
1072 |
|
|
|
1073 |
}
|
|
|
1074 |
else{
|
|
|
1075 |
if(self.changeBgSize){
|
|
|
1076 |
if(self.nzHeight>self.nzWidth){
|
|
|
1077 |
if(self.options.zoomType == "lens"){
|
|
|
1078 |
self.zoomLens.css({ "background-size": self.largeWidth/self.newvalueheight + 'px ' + self.largeHeight/self.newvalueheight + 'px' });
|
|
|
1079 |
}
|
|
|
1080 |
self.zoomWindow.css({ "background-size": self.largeWidth/self.newvalueheight + 'px ' + self.largeHeight/self.newvalueheight + 'px' });
|
|
|
1081 |
}
|
|
|
1082 |
else{
|
|
|
1083 |
if(self.options.zoomType != "lens"){
|
|
|
1084 |
self.zoomLens.css({ "background-size": self.largeWidth/self.newvaluewidth + 'px ' + self.largeHeight/self.newvaluewidth + 'px' });
|
|
|
1085 |
}
|
|
|
1086 |
self.zoomWindow.css({ "background-size": self.largeWidth/self.newvaluewidth + 'px ' + self.largeHeight/self.newvaluewidth + 'px' });
|
|
|
1087 |
}
|
|
|
1088 |
self.changeBgSize = false;
|
|
|
1089 |
}
|
|
|
1090 |
|
|
|
1091 |
self.zoomWindow.css({ backgroundPosition: self.xp + 'px ' + self.yp + 'px' });
|
|
|
1092 |
}
|
|
|
1093 |
}, 16);
|
|
|
1094 |
}
|
|
|
1095 |
}
|
|
|
1096 |
else{
|
|
|
1097 |
if(self.changeBgSize){
|
|
|
1098 |
if(self.nzHeight>self.nzWidth){
|
|
|
1099 |
if(self.options.zoomType == "lens"){
|
|
|
1100 |
self.zoomLens.css({ "background-size": self.largeWidth/self.newvalueheight + 'px ' + self.largeHeight/self.newvalueheight + 'px' });
|
|
|
1101 |
}
|
|
|
1102 |
|
|
|
1103 |
self.zoomWindow.css({ "background-size": self.largeWidth/self.newvalueheight + 'px ' + self.largeHeight/self.newvalueheight + 'px' });
|
|
|
1104 |
}
|
|
|
1105 |
else{
|
|
|
1106 |
if(self.options.zoomType == "lens"){
|
|
|
1107 |
self.zoomLens.css({ "background-size": self.largeWidth/self.newvaluewidth + 'px ' + self.largeHeight/self.newvaluewidth + 'px' });
|
|
|
1108 |
}
|
|
|
1109 |
if((self.largeHeight/self.newvaluewidth) < self.options.zoomWindowHeight){
|
|
|
1110 |
|
|
|
1111 |
self.zoomWindow.css({ "background-size": self.largeWidth/self.newvaluewidth + 'px ' + self.largeHeight/self.newvaluewidth + 'px' });
|
|
|
1112 |
}
|
|
|
1113 |
else{
|
|
|
1114 |
|
|
|
1115 |
self.zoomWindow.css({ "background-size": self.largeWidth/self.newvalueheight + 'px ' + self.largeHeight/self.newvalueheight + 'px' });
|
|
|
1116 |
}
|
|
|
1117 |
|
|
|
1118 |
}
|
|
|
1119 |
self.changeBgSize = false;
|
|
|
1120 |
}
|
|
|
1121 |
|
|
|
1122 |
self.zoomWindow.css({ backgroundPosition: self.windowLeftPos + 'px ' + self.windowTopPos + 'px' });
|
|
|
1123 |
}
|
|
|
1124 |
}
|
|
|
1125 |
},
|
|
|
1126 |
setTintPosition: function(e){
|
|
|
1127 |
var self = this;
|
|
|
1128 |
self.nzOffset = self.$elem.offset();
|
|
|
1129 |
self.tintpos = String(((e.pageX - self.nzOffset.left)-(self.zoomLens.width() / 2)) * (-1));
|
|
|
1130 |
self.tintposy = String(((e.pageY - self.nzOffset.top) - self.zoomLens.height() / 2) * (-1));
|
|
|
1131 |
if(self.Etoppos){
|
|
|
1132 |
self.tintposy = 0;
|
|
|
1133 |
}
|
|
|
1134 |
if(self.Eloppos){
|
|
|
1135 |
self.tintpos=0;
|
|
|
1136 |
}
|
|
|
1137 |
if(self.Eboppos){
|
|
|
1138 |
self.tintposy = (self.nzHeight-self.zoomLens.height()-(self.options.lensBorderSize*2))*(-1);
|
|
|
1139 |
}
|
|
|
1140 |
if(self.Eroppos){
|
|
|
1141 |
self.tintpos = ((self.nzWidth-self.zoomLens.width()-(self.options.lensBorderSize*2))*(-1));
|
|
|
1142 |
}
|
|
|
1143 |
if(self.options.tint) {
|
|
|
1144 |
//stops micro movements
|
|
|
1145 |
if(self.fullheight){
|
|
|
1146 |
self.tintposy = 0;
|
|
|
1147 |
|
|
|
1148 |
}
|
|
|
1149 |
if(self.fullwidth){
|
|
|
1150 |
self.tintpos = 0;
|
|
|
1151 |
|
|
|
1152 |
}
|
|
|
1153 |
self.zoomTintImage.css({'left': self.tintpos+'px'});
|
|
|
1154 |
self.zoomTintImage.css({'top': self.tintposy+'px'});
|
|
|
1155 |
}
|
|
|
1156 |
},
|
|
|
1157 |
|
|
|
1158 |
swaptheimage: function(smallimage, largeimage){
|
|
|
1159 |
var self = this;
|
|
|
1160 |
var newImg = new Image();
|
|
|
1161 |
|
|
|
1162 |
if(self.options.loadingIcon){
|
|
|
1163 |
self.spinner = $('<div style="background: url(\''+self.options.loadingIcon+'\') no-repeat center;height:'+self.nzHeight+'px;width:'+self.nzWidth+'px;z-index: 2000;position: absolute; background-position: center center;"></div>');
|
|
|
1164 |
self.$elem.after(self.spinner);
|
|
|
1165 |
}
|
|
|
1166 |
|
|
|
1167 |
self.options.onImageSwap(self.$elem);
|
|
|
1168 |
|
|
|
1169 |
newImg.onload = function() {
|
|
|
1170 |
self.largeWidth = newImg.width;
|
|
|
1171 |
self.largeHeight = newImg.height;
|
|
|
1172 |
self.zoomImage = largeimage;
|
|
|
1173 |
self.zoomWindow.css({ "background-size": self.largeWidth + 'px ' + self.largeHeight + 'px' });
|
|
|
1174 |
self.zoomWindow.css({ "background-size": self.largeWidth + 'px ' + self.largeHeight + 'px' });
|
|
|
1175 |
|
|
|
1176 |
|
|
|
1177 |
self.swapAction(smallimage, largeimage);
|
|
|
1178 |
return;
|
|
|
1179 |
}
|
|
|
1180 |
newImg.src = largeimage; // this must be done AFTER setting onload
|
|
|
1181 |
|
|
|
1182 |
},
|
|
|
1183 |
swapAction: function(smallimage, largeimage){
|
|
|
1184 |
|
|
|
1185 |
|
|
|
1186 |
var self = this;
|
|
|
1187 |
|
|
|
1188 |
var newImg2 = new Image();
|
|
|
1189 |
newImg2.onload = function() {
|
|
|
1190 |
//re-calculate values
|
|
|
1191 |
self.nzHeight = newImg2.height;
|
|
|
1192 |
self.nzWidth = newImg2.width;
|
|
|
1193 |
self.options.onImageSwapComplete(self.$elem);
|
|
|
1194 |
|
|
|
1195 |
self.doneCallback();
|
|
|
1196 |
return;
|
|
|
1197 |
}
|
|
|
1198 |
newImg2.src = smallimage;
|
|
|
1199 |
|
|
|
1200 |
//reset the zoomlevel to that initially set in options
|
|
|
1201 |
self.currentZoomLevel = self.options.zoomLevel;
|
|
|
1202 |
self.options.maxZoomLevel = false;
|
|
|
1203 |
|
|
|
1204 |
//swaps the main image
|
|
|
1205 |
//self.$elem.attr("src",smallimage);
|
|
|
1206 |
//swaps the zoom image
|
|
|
1207 |
if(self.options.zoomType == "lens") {
|
|
|
1208 |
self.zoomLens.css({ backgroundImage: "url('" + largeimage + "')" });
|
|
|
1209 |
}
|
|
|
1210 |
if(self.options.zoomType == "window") {
|
|
|
1211 |
self.zoomWindow.css({ backgroundImage: "url('" + largeimage + "')" });
|
|
|
1212 |
}
|
|
|
1213 |
if(self.options.zoomType == "inner") {
|
|
|
1214 |
self.zoomWindow.css({ backgroundImage: "url('" + largeimage + "')" });
|
|
|
1215 |
}
|
|
|
1216 |
|
|
|
1217 |
|
|
|
1218 |
|
|
|
1219 |
self.currentImage = largeimage;
|
|
|
1220 |
|
|
|
1221 |
if(self.options.imageCrossfade){
|
|
|
1222 |
var oldImg = self.$elem;
|
|
|
1223 |
var newImg = oldImg.clone();
|
|
|
1224 |
self.$elem.attr("src",smallimage)
|
|
|
1225 |
self.$elem.after(newImg);
|
|
|
1226 |
newImg.stop(true).fadeOut(self.options.imageCrossfade, function() {
|
|
|
1227 |
$(this).remove();
|
|
|
1228 |
});
|
|
|
1229 |
|
|
|
1230 |
// if(self.options.zoomType == "inner"){
|
|
|
1231 |
//remove any attributes on the cloned image so we can resize later
|
|
|
1232 |
self.$elem.width("auto").removeAttr("width");
|
|
|
1233 |
self.$elem.height("auto").removeAttr("height");
|
|
|
1234 |
// }
|
|
|
1235 |
|
|
|
1236 |
oldImg.fadeIn(self.options.imageCrossfade);
|
|
|
1237 |
|
|
|
1238 |
if(self.options.tint && self.options.zoomType != "inner") {
|
|
|
1239 |
|
|
|
1240 |
var oldImgTint = self.zoomTintImage;
|
|
|
1241 |
var newImgTint = oldImgTint.clone();
|
|
|
1242 |
self.zoomTintImage.attr("src",largeimage)
|
|
|
1243 |
self.zoomTintImage.after(newImgTint);
|
|
|
1244 |
newImgTint.stop(true).fadeOut(self.options.imageCrossfade, function() {
|
|
|
1245 |
$(this).remove();
|
|
|
1246 |
});
|
|
|
1247 |
|
|
|
1248 |
|
|
|
1249 |
|
|
|
1250 |
oldImgTint.fadeIn(self.options.imageCrossfade);
|
|
|
1251 |
|
|
|
1252 |
|
|
|
1253 |
//self.zoomTintImage.attr("width",elem.data("image"));
|
|
|
1254 |
|
|
|
1255 |
//resize the tint window
|
|
|
1256 |
self.zoomTint.css({ height: self.$elem.height()});
|
|
|
1257 |
self.zoomTint.css({ width: self.$elem.width()});
|
|
|
1258 |
}
|
|
|
1259 |
|
|
|
1260 |
self.zoomContainer.css("height", self.$elem.height());
|
|
|
1261 |
self.zoomContainer.css("width", self.$elem.width());
|
|
|
1262 |
|
|
|
1263 |
if(self.options.zoomType == "inner"){
|
|
|
1264 |
if(!self.options.constrainType){
|
|
|
1265 |
self.zoomWrap.parent().css("height", self.$elem.height());
|
|
|
1266 |
self.zoomWrap.parent().css("width", self.$elem.width());
|
|
|
1267 |
|
|
|
1268 |
self.zoomWindow.css("height", self.$elem.height());
|
|
|
1269 |
self.zoomWindow.css("width", self.$elem.width());
|
|
|
1270 |
}
|
|
|
1271 |
}
|
|
|
1272 |
|
|
|
1273 |
if(self.options.imageCrossfade){
|
|
|
1274 |
self.zoomWrap.css("height", self.$elem.height());
|
|
|
1275 |
self.zoomWrap.css("width", self.$elem.width());
|
|
|
1276 |
}
|
|
|
1277 |
}
|
|
|
1278 |
else{
|
|
|
1279 |
self.$elem.attr("src",smallimage);
|
|
|
1280 |
if(self.options.tint) {
|
|
|
1281 |
self.zoomTintImage.attr("src",largeimage);
|
|
|
1282 |
//self.zoomTintImage.attr("width",elem.data("image"));
|
|
|
1283 |
self.zoomTintImage.attr("height",self.$elem.height());
|
|
|
1284 |
//self.zoomTintImage.attr('src') = elem.data("image");
|
|
|
1285 |
self.zoomTintImage.css({ height: self.$elem.height()});
|
|
|
1286 |
self.zoomTint.css({ height: self.$elem.height()});
|
|
|
1287 |
|
|
|
1288 |
}
|
|
|
1289 |
self.zoomContainer.css("height", self.$elem.height());
|
|
|
1290 |
self.zoomContainer.css("width", self.$elem.width());
|
|
|
1291 |
|
|
|
1292 |
if(self.options.imageCrossfade){
|
|
|
1293 |
self.zoomWrap.css("height", self.$elem.height());
|
|
|
1294 |
self.zoomWrap.css("width", self.$elem.width());
|
|
|
1295 |
}
|
|
|
1296 |
}
|
|
|
1297 |
if(self.options.constrainType){
|
|
|
1298 |
|
|
|
1299 |
//This will contrain the image proportions
|
|
|
1300 |
if(self.options.constrainType == "height"){
|
|
|
1301 |
|
|
|
1302 |
self.zoomContainer.css("height", self.options.constrainSize);
|
|
|
1303 |
self.zoomContainer.css("width", "auto");
|
|
|
1304 |
|
|
|
1305 |
if(self.options.imageCrossfade){
|
|
|
1306 |
self.zoomWrap.css("height", self.options.constrainSize);
|
|
|
1307 |
self.zoomWrap.css("width", "auto");
|
|
|
1308 |
self.constwidth = self.zoomWrap.width();
|
|
|
1309 |
|
|
|
1310 |
|
|
|
1311 |
}
|
|
|
1312 |
else{
|
|
|
1313 |
self.$elem.css("height", self.options.constrainSize);
|
|
|
1314 |
self.$elem.css("width", "auto");
|
|
|
1315 |
self.constwidth = self.$elem.width();
|
|
|
1316 |
}
|
|
|
1317 |
|
|
|
1318 |
if(self.options.zoomType == "inner"){
|
|
|
1319 |
|
|
|
1320 |
self.zoomWrap.parent().css("height", self.options.constrainSize);
|
|
|
1321 |
self.zoomWrap.parent().css("width", self.constwidth);
|
|
|
1322 |
self.zoomWindow.css("height", self.options.constrainSize);
|
|
|
1323 |
self.zoomWindow.css("width", self.constwidth);
|
|
|
1324 |
}
|
|
|
1325 |
if(self.options.tint){
|
|
|
1326 |
self.tintContainer.css("height", self.options.constrainSize);
|
|
|
1327 |
self.tintContainer.css("width", self.constwidth);
|
|
|
1328 |
self.zoomTint.css("height", self.options.constrainSize);
|
|
|
1329 |
self.zoomTint.css("width", self.constwidth);
|
|
|
1330 |
self.zoomTintImage.css("height", self.options.constrainSize);
|
|
|
1331 |
self.zoomTintImage.css("width", self.constwidth);
|
|
|
1332 |
}
|
|
|
1333 |
|
|
|
1334 |
}
|
|
|
1335 |
if(self.options.constrainType == "width"){
|
|
|
1336 |
self.zoomContainer.css("height", "auto");
|
|
|
1337 |
self.zoomContainer.css("width", self.options.constrainSize);
|
|
|
1338 |
|
|
|
1339 |
if(self.options.imageCrossfade){
|
|
|
1340 |
self.zoomWrap.css("height", "auto");
|
|
|
1341 |
self.zoomWrap.css("width", self.options.constrainSize);
|
|
|
1342 |
self.constheight = self.zoomWrap.height();
|
|
|
1343 |
}
|
|
|
1344 |
else{
|
|
|
1345 |
self.$elem.css("height", "auto");
|
|
|
1346 |
self.$elem.css("width", self.options.constrainSize);
|
|
|
1347 |
self.constheight = self.$elem.height();
|
|
|
1348 |
}
|
|
|
1349 |
if(self.options.zoomType == "inner"){
|
|
|
1350 |
self.zoomWrap.parent().css("height", self.constheight);
|
|
|
1351 |
self.zoomWrap.parent().css("width", self.options.constrainSize);
|
|
|
1352 |
self.zoomWindow.css("height", self.constheight);
|
|
|
1353 |
self.zoomWindow.css("width", self.options.constrainSize);
|
|
|
1354 |
}
|
|
|
1355 |
if(self.options.tint){
|
|
|
1356 |
self.tintContainer.css("height", self.constheight);
|
|
|
1357 |
self.tintContainer.css("width", self.options.constrainSize);
|
|
|
1358 |
self.zoomTint.css("height", self.constheight);
|
|
|
1359 |
self.zoomTint.css("width", self.options.constrainSize);
|
|
|
1360 |
self.zoomTintImage.css("height", self.constheight);
|
|
|
1361 |
self.zoomTintImage.css("width", self.options.constrainSize);
|
|
|
1362 |
}
|
|
|
1363 |
|
|
|
1364 |
}
|
|
|
1365 |
|
|
|
1366 |
|
|
|
1367 |
}
|
|
|
1368 |
|
|
|
1369 |
},
|
|
|
1370 |
doneCallback: function(){
|
|
|
1371 |
|
|
|
1372 |
var self = this;
|
|
|
1373 |
if(self.options.loadingIcon){
|
|
|
1374 |
self.spinner.hide();
|
|
|
1375 |
}
|
|
|
1376 |
|
|
|
1377 |
self.nzOffset = self.$elem.offset();
|
|
|
1378 |
self.nzWidth = self.$elem.width();
|
|
|
1379 |
self.nzHeight = self.$elem.height();
|
|
|
1380 |
|
|
|
1381 |
// reset the zoomlevel back to default
|
|
|
1382 |
self.currentZoomLevel = self.options.zoomLevel;
|
|
|
1383 |
|
|
|
1384 |
//ratio of the large to small image
|
|
|
1385 |
self.widthRatio = self.largeWidth / self.nzWidth;
|
|
|
1386 |
self.heightRatio = self.largeHeight / self.nzHeight;
|
|
|
1387 |
|
|
|
1388 |
//NEED TO ADD THE LENS SIZE FOR ROUND
|
|
|
1389 |
// adjust images less than the window height
|
|
|
1390 |
if(self.options.zoomType == "window") {
|
|
|
1391 |
|
|
|
1392 |
if(self.nzHeight < self.options.zoomWindowWidth/self.widthRatio){
|
|
|
1393 |
lensHeight = self.nzHeight;
|
|
|
1394 |
|
|
|
1395 |
}
|
|
|
1396 |
else{
|
|
|
1397 |
lensHeight = String((self.options.zoomWindowHeight/self.heightRatio))
|
|
|
1398 |
}
|
|
|
1399 |
|
|
|
1400 |
if(self.options.zoomWindowWidth < self.options.zoomWindowWidth){
|
|
|
1401 |
lensWidth = self.nzWidth;
|
|
|
1402 |
}
|
|
|
1403 |
else{
|
|
|
1404 |
lensWidth = (self.options.zoomWindowWidth/self.widthRatio);
|
|
|
1405 |
}
|
|
|
1406 |
|
|
|
1407 |
|
|
|
1408 |
if(self.zoomLens){
|
|
|
1409 |
|
|
|
1410 |
self.zoomLens.css('width', lensWidth);
|
|
|
1411 |
self.zoomLens.css('height', lensHeight);
|
|
|
1412 |
|
|
|
1413 |
|
|
|
1414 |
}
|
|
|
1415 |
}
|
|
|
1416 |
},
|
|
|
1417 |
getCurrentImage: function(){
|
|
|
1418 |
var self = this;
|
|
|
1419 |
return self.zoomImage;
|
|
|
1420 |
},
|
|
|
1421 |
getGalleryList: function(){
|
|
|
1422 |
var self = this;
|
|
|
1423 |
//loop through the gallery options and set them in list for fancybox
|
|
|
1424 |
self.gallerylist = [];
|
|
|
1425 |
if (self.options.gallery){
|
|
|
1426 |
|
|
|
1427 |
|
|
|
1428 |
$('#'+self.options.gallery + ' a').each(function() {
|
|
|
1429 |
|
|
|
1430 |
var img_src = '';
|
|
|
1431 |
if($(this).data("zoom-image")){
|
|
|
1432 |
img_src = $(this).data("zoom-image");
|
|
|
1433 |
}
|
|
|
1434 |
else if($(this).data("image")){
|
|
|
1435 |
img_src = $(this).data("image");
|
|
|
1436 |
}
|
|
|
1437 |
//put the current image at the start
|
|
|
1438 |
if(img_src == self.zoomImage){
|
|
|
1439 |
self.gallerylist.unshift({
|
|
|
1440 |
href: ''+img_src+'',
|
|
|
1441 |
title: $(this).find('img').attr("title")
|
|
|
1442 |
});
|
|
|
1443 |
}
|
|
|
1444 |
else{
|
|
|
1445 |
self.gallerylist.push({
|
|
|
1446 |
href: ''+img_src+'',
|
|
|
1447 |
title: $(this).find('img').attr("title")
|
|
|
1448 |
});
|
|
|
1449 |
}
|
|
|
1450 |
|
|
|
1451 |
|
|
|
1452 |
});
|
|
|
1453 |
}
|
|
|
1454 |
//if no gallery - return current image
|
|
|
1455 |
else{
|
|
|
1456 |
self.gallerylist.push({
|
|
|
1457 |
href: ''+self.zoomImage+'',
|
|
|
1458 |
title: $(this).find('img').attr("title")
|
|
|
1459 |
});
|
|
|
1460 |
}
|
|
|
1461 |
return self.gallerylist;
|
|
|
1462 |
|
|
|
1463 |
},
|
|
|
1464 |
changeZoomLevel: function(value){
|
|
|
1465 |
var self = this;
|
|
|
1466 |
|
|
|
1467 |
//flag a zoom, so can adjust the easing during setPosition
|
|
|
1468 |
self.scrollingLock = true;
|
|
|
1469 |
|
|
|
1470 |
//round to two decimal places
|
|
|
1471 |
self.newvalue = parseFloat(value).toFixed(2);
|
|
|
1472 |
newvalue = parseFloat(value).toFixed(2);
|
|
|
1473 |
|
|
|
1474 |
|
|
|
1475 |
|
|
|
1476 |
|
|
|
1477 |
//maxwidth & Maxheight of the image
|
|
|
1478 |
maxheightnewvalue = self.largeHeight/((self.options.zoomWindowHeight / self.nzHeight) * self.nzHeight);
|
|
|
1479 |
maxwidthtnewvalue = self.largeWidth/((self.options.zoomWindowWidth / self.nzWidth) * self.nzWidth);
|
|
|
1480 |
|
|
|
1481 |
|
|
|
1482 |
|
|
|
1483 |
|
|
|
1484 |
//calculate new heightratio
|
|
|
1485 |
if(self.options.zoomType != "inner")
|
|
|
1486 |
{
|
|
|
1487 |
if(maxheightnewvalue <= newvalue){
|
|
|
1488 |
self.heightRatio = (self.largeHeight/maxheightnewvalue) / self.nzHeight;
|
|
|
1489 |
self.newvalueheight = maxheightnewvalue;
|
|
|
1490 |
self.fullheight = true;
|
|
|
1491 |
|
|
|
1492 |
}
|
|
|
1493 |
else{
|
|
|
1494 |
self.heightRatio = (self.largeHeight/newvalue) / self.nzHeight;
|
|
|
1495 |
self.newvalueheight = newvalue;
|
|
|
1496 |
self.fullheight = false;
|
|
|
1497 |
|
|
|
1498 |
}
|
|
|
1499 |
|
|
|
1500 |
|
|
|
1501 |
// calculate new width ratio
|
|
|
1502 |
|
|
|
1503 |
if(maxwidthtnewvalue <= newvalue){
|
|
|
1504 |
self.widthRatio = (self.largeWidth/maxwidthtnewvalue) / self.nzWidth;
|
|
|
1505 |
self.newvaluewidth = maxwidthtnewvalue;
|
|
|
1506 |
self.fullwidth = true;
|
|
|
1507 |
|
|
|
1508 |
}
|
|
|
1509 |
else{
|
|
|
1510 |
self.widthRatio = (self.largeWidth/newvalue) / self.nzWidth;
|
|
|
1511 |
self.newvaluewidth = newvalue;
|
|
|
1512 |
self.fullwidth = false;
|
|
|
1513 |
|
|
|
1514 |
}
|
|
|
1515 |
if(self.options.zoomType == "lens"){
|
|
|
1516 |
if(maxheightnewvalue <= newvalue){
|
|
|
1517 |
self.fullwidth = true;
|
|
|
1518 |
self.newvaluewidth = maxheightnewvalue;
|
|
|
1519 |
|
|
|
1520 |
} else{
|
|
|
1521 |
self.widthRatio = (self.largeWidth/newvalue) / self.nzWidth;
|
|
|
1522 |
self.newvaluewidth = newvalue;
|
|
|
1523 |
|
|
|
1524 |
self.fullwidth = false;
|
|
|
1525 |
}}
|
|
|
1526 |
}
|
|
|
1527 |
|
|
|
1528 |
|
|
|
1529 |
|
|
|
1530 |
if(self.options.zoomType == "inner")
|
|
|
1531 |
{
|
|
|
1532 |
maxheightnewvalue = parseFloat(self.largeHeight/self.nzHeight).toFixed(2);
|
|
|
1533 |
maxwidthtnewvalue = parseFloat(self.largeWidth/self.nzWidth).toFixed(2);
|
|
|
1534 |
if(newvalue > maxheightnewvalue){
|
|
|
1535 |
newvalue = maxheightnewvalue;
|
|
|
1536 |
}
|
|
|
1537 |
if(newvalue > maxwidthtnewvalue){
|
|
|
1538 |
newvalue = maxwidthtnewvalue;
|
|
|
1539 |
}
|
|
|
1540 |
|
|
|
1541 |
|
|
|
1542 |
if(maxheightnewvalue <= newvalue){
|
|
|
1543 |
|
|
|
1544 |
|
|
|
1545 |
self.heightRatio = (self.largeHeight/newvalue) / self.nzHeight;
|
|
|
1546 |
if(newvalue > maxheightnewvalue){
|
|
|
1547 |
self.newvalueheight = maxheightnewvalue;
|
|
|
1548 |
}else{
|
|
|
1549 |
self.newvalueheight = newvalue;
|
|
|
1550 |
}
|
|
|
1551 |
self.fullheight = true;
|
|
|
1552 |
|
|
|
1553 |
|
|
|
1554 |
}
|
|
|
1555 |
else{
|
|
|
1556 |
|
|
|
1557 |
|
|
|
1558 |
|
|
|
1559 |
self.heightRatio = (self.largeHeight/newvalue) / self.nzHeight;
|
|
|
1560 |
|
|
|
1561 |
if(newvalue > maxheightnewvalue){
|
|
|
1562 |
|
|
|
1563 |
self.newvalueheight = maxheightnewvalue;
|
|
|
1564 |
}else{
|
|
|
1565 |
self.newvalueheight = newvalue;
|
|
|
1566 |
}
|
|
|
1567 |
self.fullheight = false;
|
|
|
1568 |
}
|
|
|
1569 |
|
|
|
1570 |
|
|
|
1571 |
|
|
|
1572 |
|
|
|
1573 |
if(maxwidthtnewvalue <= newvalue){
|
|
|
1574 |
|
|
|
1575 |
self.widthRatio = (self.largeWidth/newvalue) / self.nzWidth;
|
|
|
1576 |
if(newvalue > maxwidthtnewvalue){
|
|
|
1577 |
|
|
|
1578 |
self.newvaluewidth = maxwidthtnewvalue;
|
|
|
1579 |
}else{
|
|
|
1580 |
self.newvaluewidth = newvalue;
|
|
|
1581 |
}
|
|
|
1582 |
|
|
|
1583 |
self.fullwidth = true;
|
|
|
1584 |
|
|
|
1585 |
|
|
|
1586 |
}
|
|
|
1587 |
else{
|
|
|
1588 |
|
|
|
1589 |
self.widthRatio = (self.largeWidth/newvalue) / self.nzWidth;
|
|
|
1590 |
self.newvaluewidth = newvalue;
|
|
|
1591 |
self.fullwidth = false;
|
|
|
1592 |
}
|
|
|
1593 |
|
|
|
1594 |
|
|
|
1595 |
} //end inner
|
|
|
1596 |
scrcontinue = false;
|
|
|
1597 |
|
|
|
1598 |
if(self.options.zoomType == "inner"){
|
|
|
1599 |
|
|
|
1600 |
if(self.nzWidth > self.nzHeight){
|
|
|
1601 |
if( self.newvaluewidth <= maxwidthtnewvalue){
|
|
|
1602 |
scrcontinue = true;
|
|
|
1603 |
}
|
|
|
1604 |
else{
|
|
|
1605 |
|
|
|
1606 |
scrcontinue = false;
|
|
|
1607 |
self.fullheight = true;
|
|
|
1608 |
self.fullwidth = true;
|
|
|
1609 |
}
|
|
|
1610 |
}
|
|
|
1611 |
if(self.nzHeight > self.nzWidth){
|
|
|
1612 |
if( self.newvaluewidth <= maxwidthtnewvalue){
|
|
|
1613 |
scrcontinue = true;
|
|
|
1614 |
}
|
|
|
1615 |
else{
|
|
|
1616 |
scrcontinue = false;
|
|
|
1617 |
|
|
|
1618 |
self.fullheight = true;
|
|
|
1619 |
self.fullwidth = true;
|
|
|
1620 |
}
|
|
|
1621 |
}
|
|
|
1622 |
}
|
|
|
1623 |
|
|
|
1624 |
if(self.options.zoomType != "inner"){
|
|
|
1625 |
scrcontinue = true;
|
|
|
1626 |
}
|
|
|
1627 |
|
|
|
1628 |
if(scrcontinue){
|
|
|
1629 |
|
|
|
1630 |
|
|
|
1631 |
|
|
|
1632 |
self.zoomLock = 0;
|
|
|
1633 |
self.changeZoom = true;
|
|
|
1634 |
|
|
|
1635 |
//if lens height is less than image height
|
|
|
1636 |
|
|
|
1637 |
|
|
|
1638 |
if(((self.options.zoomWindowHeight)/self.heightRatio) <= self.nzHeight){
|
|
|
1639 |
|
|
|
1640 |
|
|
|
1641 |
self.currentZoomLevel = self.newvalueheight;
|
|
|
1642 |
if(self.options.zoomType != "lens" && self.options.zoomType != "inner") {
|
|
|
1643 |
self.changeBgSize = true;
|
|
|
1644 |
|
|
|
1645 |
self.zoomLens.css({height: String((self.options.zoomWindowHeight)/self.heightRatio) + 'px' })
|
|
|
1646 |
}
|
|
|
1647 |
if(self.options.zoomType == "lens" || self.options.zoomType == "inner") {
|
|
|
1648 |
self.changeBgSize = true;
|
|
|
1649 |
}
|
|
|
1650 |
|
|
|
1651 |
|
|
|
1652 |
}
|
|
|
1653 |
|
|
|
1654 |
|
|
|
1655 |
|
|
|
1656 |
|
|
|
1657 |
if((self.options.zoomWindowWidth/self.widthRatio) <= self.nzWidth){
|
|
|
1658 |
|
|
|
1659 |
|
|
|
1660 |
|
|
|
1661 |
if(self.options.zoomType != "inner"){
|
|
|
1662 |
if(self.newvaluewidth > self.newvalueheight) {
|
|
|
1663 |
self.currentZoomLevel = self.newvaluewidth;
|
|
|
1664 |
|
|
|
1665 |
}
|
|
|
1666 |
}
|
|
|
1667 |
|
|
|
1668 |
if(self.options.zoomType != "lens" && self.options.zoomType != "inner") {
|
|
|
1669 |
self.changeBgSize = true;
|
|
|
1670 |
|
|
|
1671 |
self.zoomLens.css({width: String((self.options.zoomWindowWidth)/self.widthRatio) + 'px' })
|
|
|
1672 |
}
|
|
|
1673 |
if(self.options.zoomType == "lens" || self.options.zoomType == "inner") {
|
|
|
1674 |
self.changeBgSize = true;
|
|
|
1675 |
}
|
|
|
1676 |
|
|
|
1677 |
}
|
|
|
1678 |
if(self.options.zoomType == "inner"){
|
|
|
1679 |
self.changeBgSize = true;
|
|
|
1680 |
|
|
|
1681 |
if(self.nzWidth > self.nzHeight){
|
|
|
1682 |
self.currentZoomLevel = self.newvaluewidth;
|
|
|
1683 |
}
|
|
|
1684 |
if(self.nzHeight > self.nzWidth){
|
|
|
1685 |
self.currentZoomLevel = self.newvaluewidth;
|
|
|
1686 |
}
|
|
|
1687 |
}
|
|
|
1688 |
|
|
|
1689 |
} //under
|
|
|
1690 |
|
|
|
1691 |
//sets the boundry change, called in setWindowPos
|
|
|
1692 |
self.setPosition(self.currentLoc);
|
|
|
1693 |
//
|
|
|
1694 |
},
|
|
|
1695 |
closeAll: function(){
|
|
|
1696 |
if(self.zoomWindow){self.zoomWindow.hide();}
|
|
|
1697 |
if(self.zoomLens){self.zoomLens.hide();}
|
|
|
1698 |
if(self.zoomTint){self.zoomTint.hide();}
|
|
|
1699 |
},
|
|
|
1700 |
changeState: function(value){
|
|
|
1701 |
var self = this;
|
|
|
1702 |
if(value == 'enable'){self.options.zoomEnabled = true;}
|
|
|
1703 |
if(value == 'disable'){self.options.zoomEnabled = false;}
|
|
|
1704 |
|
|
|
1705 |
}
|
|
|
1706 |
|
|
|
1707 |
};
|
|
|
1708 |
|
|
|
1709 |
|
|
|
1710 |
|
|
|
1711 |
|
|
|
1712 |
$.fn.elevateZoom = function( options ) {
|
|
|
1713 |
return this.each(function() {
|
|
|
1714 |
var elevate = Object.create( ElevateZoom );
|
|
|
1715 |
|
|
|
1716 |
elevate.init( options, this );
|
|
|
1717 |
|
|
|
1718 |
$.data( this, 'elevateZoom', elevate );
|
|
|
1719 |
|
|
|
1720 |
});
|
|
|
1721 |
};
|
|
|
1722 |
|
|
|
1723 |
$.fn.elevateZoom.options = {
|
|
|
1724 |
zoomActivation: "hover", // Can also be click (PLACEHOLDER FOR NEXT VERSION)
|
|
|
1725 |
zoomEnabled: true, //false disables zoomwindow from showing
|
|
|
1726 |
preloading: 1, //by default, load all the images, if 0, then only load images after activated (PLACEHOLDER FOR NEXT VERSION)
|
|
|
1727 |
zoomLevel: 1, //default zoom level of image
|
|
|
1728 |
scrollZoom: false, //allow zoom on mousewheel, true to activate
|
|
|
1729 |
scrollZoomIncrement: 0.1, //steps of the scrollzoom
|
|
|
1730 |
minZoomLevel: false,
|
|
|
1731 |
maxZoomLevel: false,
|
|
|
1732 |
easing: false,
|
|
|
1733 |
easingAmount: 12,
|
|
|
1734 |
lensSize: 200,
|
|
|
1735 |
zoomWindowWidth: 400,
|
|
|
1736 |
zoomWindowHeight: 400,
|
|
|
1737 |
zoomWindowOffetx: 0,
|
|
|
1738 |
zoomWindowOffety: 0,
|
|
|
1739 |
zoomWindowPosition: 1,
|
|
|
1740 |
zoomWindowBgColour: "#fff",
|
|
|
1741 |
lensFadeIn: false,
|
|
|
1742 |
lensFadeOut: false,
|
|
|
1743 |
debug: false,
|
|
|
1744 |
zoomWindowFadeIn: false,
|
|
|
1745 |
zoomWindowFadeOut: false,
|
|
|
1746 |
zoomWindowAlwaysShow: false,
|
|
|
1747 |
zoomTintFadeIn: false,
|
|
|
1748 |
zoomTintFadeOut: false,
|
|
|
1749 |
borderSize: 4,
|
|
|
1750 |
showLens: true,
|
|
|
1751 |
borderColour: "#888",
|
|
|
1752 |
lensBorderSize: 1,
|
|
|
1753 |
lensBorderColour: "#000",
|
|
|
1754 |
lensShape: "square", //can be "round"
|
|
|
1755 |
zoomType: "window", //window is default, also "lens" available -
|
|
|
1756 |
containLensZoom: false,
|
|
|
1757 |
lensColour: "white", //colour of the lens background
|
|
|
1758 |
lensOpacity: 0.4, //opacity of the lens
|
|
|
1759 |
lenszoom: false,
|
|
|
1760 |
tint: false, //enable the tinting
|
|
|
1761 |
tintColour: "#333", //default tint color, can be anything, red, #ccc, rgb(0,0,0)
|
|
|
1762 |
tintOpacity: 0.4, //opacity of the tint
|
|
|
1763 |
gallery: false,
|
|
|
1764 |
galleryActiveClass: "zoomGalleryActive",
|
|
|
1765 |
imageCrossfade: false,
|
|
|
1766 |
constrainType: false, //width or height
|
|
|
1767 |
constrainSize: false, //in pixels the dimensions you want to constrain on
|
|
|
1768 |
loadingIcon: false, //http://www.example.com/spinner.gif
|
|
|
1769 |
cursor:"default", // user should set to what they want the cursor as, if they have set a click function
|
|
|
1770 |
responsive:true,
|
|
|
1771 |
onComplete: $.noop,
|
|
|
1772 |
onZoomedImageLoaded: function() {},
|
|
|
1773 |
onImageSwap: $.noop,
|
|
|
1774 |
onImageSwapComplete: $.noop
|
|
|
1775 |
};
|
|
|
1776 |
|
|
|
1777 |
})( jQuery, window, document );
|