jquery.elevatezoom.js 58 KB

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