elevatezoom-rails 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +15 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +22 -0
- data/README.md +65 -0
- data/Rakefile +2 -0
- data/app/assets/images/large/image1.jpg +0 -0
- data/app/assets/images/large/image2.jpg +0 -0
- data/app/assets/images/large/image3.jpg +0 -0
- data/app/assets/images/large/image4.jpg +0 -0
- data/app/assets/images/small/image1.png +0 -0
- data/app/assets/images/small/image2.png +0 -0
- data/app/assets/images/small/image3.png +0 -0
- data/app/assets/images/small/image4.png +0 -0
- data/app/assets/images/thumb/image1.jpg +0 -0
- data/app/assets/images/thumb/image2.jpg +0 -0
- data/app/assets/images/thumb/image3.jpg +0 -0
- data/app/assets/images/thumb/image4.jpg +0 -0
- data/app/assets/images/window-positions.png +0 -0
- data/app/assets/javascripts/jquery.elevateZoom-3.0.8.min.js +66 -0
- data/app/assets/javascripts/jquery.elevatezoom.js +1777 -0
- data/elevatezoom-rails.gemspec +23 -0
- data/lib/elevatezoom-rails.rb +8 -0
- data/lib/elevatezoom-rails/version.rb +5 -0
- metadata +94 -0
checksums.yaml
ADDED
@@ -0,0 +1,15 @@
|
|
1
|
+
---
|
2
|
+
!binary "U0hBMQ==":
|
3
|
+
metadata.gz: !binary |-
|
4
|
+
YTA1ZWY5ZWY3ZmMxNTM5NjA0NDI3NTdmMjdiZDJlNzM4ODBmNTUzZA==
|
5
|
+
data.tar.gz: !binary |-
|
6
|
+
OGE3ODdmMjEyNGMzZjkzM2NkMWMyZTcwYjE5N2NlZWI2ODU4NmQ5Ng==
|
7
|
+
SHA512:
|
8
|
+
metadata.gz: !binary |-
|
9
|
+
MDM4MjVkZjAzMzg0MGRmODMyN2U2MzIzZTUzYzdiMWY2NjVmMmI4YTQ0YmUy
|
10
|
+
Y2NmNzRhZmU4OGViNWIxYzU5MWEzZDkxOTA4ZDI2MTFlNDhkZmU5OTdlN2Uw
|
11
|
+
NWUyMTI4MmM3MjI1MWFkOTYzYTg2ZGJhY2FhZGU1OGU1MDNiOTc=
|
12
|
+
data.tar.gz: !binary |-
|
13
|
+
ZDlkOTYzNTI5ZmJhN2JiMDQ3OTExOTUxYzkxYzIzZjFhOTFiM2IwYjlkNWVi
|
14
|
+
OWRjMzFkNjM1MDQ4YjI5NGI1MGYzOGI3NzNhMGQ5NTAxZjkwZDYxMDRiYTI2
|
15
|
+
NzgxMzU3YzdiN2NiODJkNzg3Mjc1ZWU0ZmYxOTVkNjg4ZGE2MmI=
|
data/Gemfile
ADDED
data/LICENSE.txt
ADDED
@@ -0,0 +1,22 @@
|
|
1
|
+
Copyright (c) 2015 TwoWeb
|
2
|
+
|
3
|
+
MIT License
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
6
|
+
a copy of this software and associated documentation files (the
|
7
|
+
"Software"), to deal in the Software without restriction, including
|
8
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
9
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
10
|
+
permit persons to whom the Software is furnished to do so, subject to
|
11
|
+
the following conditions:
|
12
|
+
|
13
|
+
The above copyright notice and this permission notice shall be
|
14
|
+
included in all copies or substantial portions of the Software.
|
15
|
+
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
17
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
18
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
19
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
20
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
21
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
22
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,65 @@
|
|
1
|
+
# ElevateZoom Rails Gem
|
2
|
+
|
3
|
+
For ruby ~> 1.9.3
|
4
|
+
|
5
|
+
## Installation
|
6
|
+
|
7
|
+
Add this line to your application's Gemfile:
|
8
|
+
|
9
|
+
```ruby
|
10
|
+
gem 'elevatezoom-rails'
|
11
|
+
```
|
12
|
+
|
13
|
+
And then execute:
|
14
|
+
```
|
15
|
+
$ bundle install
|
16
|
+
```
|
17
|
+
|
18
|
+
## Usage
|
19
|
+
|
20
|
+
SimplyScroll is dependant on jQuery, so make sure you have it in your Gemfile.
|
21
|
+
|
22
|
+
```
|
23
|
+
//= require jquery
|
24
|
+
```
|
25
|
+
|
26
|
+
Add to your app/assets/javascripts/application.js
|
27
|
+
|
28
|
+
```
|
29
|
+
//= require jquery.elevatezoom
|
30
|
+
```
|
31
|
+
|
32
|
+
Or for the minified version
|
33
|
+
|
34
|
+
```
|
35
|
+
//= require jquery.elevateZoom-3.0.8.min
|
36
|
+
```
|
37
|
+
|
38
|
+
|
39
|
+
## Example
|
40
|
+
Include jQuery and the plugin on a page. Include your images and initialise the plugin.
|
41
|
+
|
42
|
+
```html
|
43
|
+
<img id="zoom_01" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg"/>
|
44
|
+
|
45
|
+
<script>
|
46
|
+
$('#zoom_01').elevateZoom();
|
47
|
+
</script>
|
48
|
+
```
|
49
|
+
|
50
|
+
## Documentation
|
51
|
+
|
52
|
+
Usage documentation as well as demos can be found at:
|
53
|
+
|
54
|
+
http://www.elevateweb.co.uk/image-zoom/examples
|
55
|
+
|
56
|
+
https://github.com/elevateweb/elevatezoom
|
57
|
+
|
58
|
+
|
59
|
+
## Contributing
|
60
|
+
|
61
|
+
1. Fork it ( https://github.com/twoweb/elevatezoom-rails/fork )
|
62
|
+
2. Create your feature branch (`git checkout -b my-new-feature`)
|
63
|
+
3. Commit your changes (`git commit -am 'Add some feature'`)
|
64
|
+
4. Push to the branch (`git push origin my-new-feature`)
|
65
|
+
5. Create a new Pull Request
|
data/Rakefile
ADDED
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
@@ -0,0 +1,66 @@
|
|
1
|
+
/* jQuery elevateZoom 3.0.8 - Demo's and documentation: - www.elevateweb.co.uk/image-zoom - Copyright (c) 2013 Andrew Eades - www.elevateweb.co.uk - Dual licensed under the LGPL licenses. - http://en.wikipedia.org/wiki/MIT_License - http://en.wikipedia.org/wiki/GNU_General_Public_License */
|
2
|
+
"function"!==typeof Object.create&&(Object.create=function(d){function h(){}h.prototype=d;return new h});
|
3
|
+
(function(d,h,l,m){var k={init:function(b,a){var c=this;c.elem=a;c.$elem=d(a);c.imageSrc=c.$elem.data("zoom-image")?c.$elem.data("zoom-image"):c.$elem.attr("src");c.options=d.extend({},d.fn.elevateZoom.options,b);c.options.tint&&(c.options.lensColour="none",c.options.lensOpacity="1");"inner"==c.options.zoomType&&(c.options.showLens=!1);c.$elem.parent().removeAttr("title").removeAttr("alt");c.zoomImage=c.imageSrc;c.refresh(1);d("#"+c.options.gallery+" a").click(function(a){c.options.galleryActiveClass&&
|
4
|
+
(d("#"+c.options.gallery+" a").removeClass(c.options.galleryActiveClass),d(this).addClass(c.options.galleryActiveClass));a.preventDefault();d(this).data("zoom-image")?c.zoomImagePre=d(this).data("zoom-image"):c.zoomImagePre=d(this).data("image");c.swaptheimage(d(this).data("image"),c.zoomImagePre);return!1})},refresh:function(b){var a=this;setTimeout(function(){a.fetch(a.imageSrc)},b||a.options.refresh)},fetch:function(b){var a=this,c=new Image;c.onload=function(){a.largeWidth=c.width;a.largeHeight=
|
5
|
+
c.height;a.startZoom();a.currentImage=a.imageSrc;a.options.onZoomedImageLoaded(a.$elem)};c.src=b},startZoom:function(){var b=this;b.nzWidth=b.$elem.width();b.nzHeight=b.$elem.height();b.isWindowActive=!1;b.isLensActive=!1;b.isTintActive=!1;b.overWindow=!1;b.options.imageCrossfade&&(b.zoomWrap=b.$elem.wrap('<div style="height:'+b.nzHeight+"px;width:"+b.nzWidth+'px;" class="zoomWrapper" />'),b.$elem.css("position","absolute"));b.zoomLock=1;b.scrollingLock=!1;b.changeBgSize=!1;b.currentZoomLevel=b.options.zoomLevel;
|
6
|
+
b.nzOffset=b.$elem.offset();b.widthRatio=b.largeWidth/b.currentZoomLevel/b.nzWidth;b.heightRatio=b.largeHeight/b.currentZoomLevel/b.nzHeight;"window"==b.options.zoomType&&(b.zoomWindowStyle="overflow: hidden;background-position: 0px 0px;text-align:center;background-color: "+String(b.options.zoomWindowBgColour)+";width: "+String(b.options.zoomWindowWidth)+"px;height: "+String(b.options.zoomWindowHeight)+"px;float: left;background-size: "+b.largeWidth/b.currentZoomLevel+"px "+b.largeHeight/b.currentZoomLevel+
|
7
|
+
"px;display: none;z-index:100;border: "+String(b.options.borderSize)+"px solid "+b.options.borderColour+";background-repeat: no-repeat;position: absolute;");if("inner"==b.options.zoomType){var a=b.$elem.css("border-left-width");b.zoomWindowStyle="overflow: hidden;margin-left: "+String(a)+";margin-top: "+String(a)+";background-position: 0px 0px;width: "+String(b.nzWidth)+"px;height: "+String(b.nzHeight)+"px;float: left;display: none;cursor:"+b.options.cursor+";px solid "+b.options.borderColour+";background-repeat: no-repeat;position: absolute;"}"window"==
|
8
|
+
b.options.zoomType&&(lensHeight=b.nzHeight<b.options.zoomWindowWidth/b.widthRatio?b.nzHeight:String(b.options.zoomWindowHeight/b.heightRatio),lensWidth=b.largeWidth<b.options.zoomWindowWidth?b.nzWidth:b.options.zoomWindowWidth/b.widthRatio,b.lensStyle="background-position: 0px 0px;width: "+String(b.options.zoomWindowWidth/b.widthRatio)+"px;height: "+String(b.options.zoomWindowHeight/b.heightRatio)+"px;float: right;display: none;overflow: hidden;z-index: 999;-webkit-transform: translateZ(0);opacity:"+
|
9
|
+
b.options.lensOpacity+";filter: alpha(opacity = "+100*b.options.lensOpacity+"); zoom:1;width:"+lensWidth+"px;height:"+lensHeight+"px;background-color:"+b.options.lensColour+";cursor:"+b.options.cursor+";border: "+b.options.lensBorderSize+"px solid "+b.options.lensBorderColour+";background-repeat: no-repeat;position: absolute;");b.tintStyle="display: block;position: absolute;background-color: "+b.options.tintColour+";filter:alpha(opacity=0);opacity: 0;width: "+b.nzWidth+"px;height: "+b.nzHeight+"px;";
|
10
|
+
b.lensRound="";"lens"==b.options.zoomType&&(b.lensStyle="background-position: 0px 0px;float: left;display: none;border: "+String(b.options.borderSize)+"px solid "+b.options.borderColour+";width:"+String(b.options.lensSize)+"px;height:"+String(b.options.lensSize)+"px;background-repeat: no-repeat;position: absolute;");"round"==b.options.lensShape&&(b.lensRound="border-top-left-radius: "+String(b.options.lensSize/2+b.options.borderSize)+"px;border-top-right-radius: "+String(b.options.lensSize/2+b.options.borderSize)+
|
11
|
+
"px;border-bottom-left-radius: "+String(b.options.lensSize/2+b.options.borderSize)+"px;border-bottom-right-radius: "+String(b.options.lensSize/2+b.options.borderSize)+"px;");b.zoomContainer=d('<div class="zoomContainer" style="-webkit-transform: translateZ(0);position:absolute;left:'+b.nzOffset.left+"px;top:"+b.nzOffset.top+"px;height:"+b.nzHeight+"px;width:"+b.nzWidth+'px;"></div>');d("body").append(b.zoomContainer);b.options.containLensZoom&&"lens"==b.options.zoomType&&b.zoomContainer.css("overflow",
|
12
|
+
"hidden");"inner"!=b.options.zoomType&&(b.zoomLens=d("<div class='zoomLens' style='"+b.lensStyle+b.lensRound+"'> </div>").appendTo(b.zoomContainer).click(function(){b.$elem.trigger("click")}),b.options.tint&&(b.tintContainer=d("<div/>").addClass("tintContainer"),b.zoomTint=d("<div class='zoomTint' style='"+b.tintStyle+"'></div>"),b.zoomLens.wrap(b.tintContainer),b.zoomTintcss=b.zoomLens.after(b.zoomTint),b.zoomTintImage=d('<img style="position: absolute; left: 0px; top: 0px; max-width: none; width: '+
|
13
|
+
b.nzWidth+"px; height: "+b.nzHeight+'px;" src="'+b.imageSrc+'">').appendTo(b.zoomLens).click(function(){b.$elem.trigger("click")})));isNaN(b.options.zoomWindowPosition)?b.zoomWindow=d("<div style='z-index:999;left:"+b.windowOffsetLeft+"px;top:"+b.windowOffsetTop+"px;"+b.zoomWindowStyle+"' class='zoomWindow'> </div>").appendTo("body").click(function(){b.$elem.trigger("click")}):b.zoomWindow=d("<div style='z-index:999;left:"+b.windowOffsetLeft+"px;top:"+b.windowOffsetTop+"px;"+b.zoomWindowStyle+
|
14
|
+
"' class='zoomWindow'> </div>").appendTo(b.zoomContainer).click(function(){b.$elem.trigger("click")});b.zoomWindowContainer=d("<div/>").addClass("zoomWindowContainer").css("width",b.options.zoomWindowWidth);b.zoomWindow.wrap(b.zoomWindowContainer);"lens"==b.options.zoomType&&b.zoomLens.css({backgroundImage:"url('"+b.imageSrc+"')"});"window"==b.options.zoomType&&b.zoomWindow.css({backgroundImage:"url('"+b.imageSrc+"')"});"inner"==b.options.zoomType&&b.zoomWindow.css({backgroundImage:"url('"+b.imageSrc+
|
15
|
+
"')"});b.$elem.bind("touchmove",function(a){a.preventDefault();b.setPosition(a.originalEvent.touches[0]||a.originalEvent.changedTouches[0])});b.zoomContainer.bind("touchmove",function(a){"inner"==b.options.zoomType&&b.showHideWindow("show");a.preventDefault();b.setPosition(a.originalEvent.touches[0]||a.originalEvent.changedTouches[0])});b.zoomContainer.bind("touchend",function(a){b.showHideWindow("hide");b.options.showLens&&b.showHideLens("hide");b.options.tint&&"inner"!=b.options.zoomType&&b.showHideTint("hide")});
|
16
|
+
b.$elem.bind("touchend",function(a){b.showHideWindow("hide");b.options.showLens&&b.showHideLens("hide");b.options.tint&&"inner"!=b.options.zoomType&&b.showHideTint("hide")});b.options.showLens&&(b.zoomLens.bind("touchmove",function(a){a.preventDefault();b.setPosition(a.originalEvent.touches[0]||a.originalEvent.changedTouches[0])}),b.zoomLens.bind("touchend",function(a){b.showHideWindow("hide");b.options.showLens&&b.showHideLens("hide");b.options.tint&&"inner"!=b.options.zoomType&&b.showHideTint("hide")}));
|
17
|
+
b.$elem.bind("mousemove",function(a){!1==b.overWindow&&b.setElements("show");if(b.lastX!==a.clientX||b.lastY!==a.clientY)b.setPosition(a),b.currentLoc=a;b.lastX=a.clientX;b.lastY=a.clientY});b.zoomContainer.bind("mousemove",function(a){!1==b.overWindow&&b.setElements("show");if(b.lastX!==a.clientX||b.lastY!==a.clientY)b.setPosition(a),b.currentLoc=a;b.lastX=a.clientX;b.lastY=a.clientY});"inner"!=b.options.zoomType&&b.zoomLens.bind("mousemove",function(a){if(b.lastX!==a.clientX||b.lastY!==a.clientY)b.setPosition(a),
|
18
|
+
b.currentLoc=a;b.lastX=a.clientX;b.lastY=a.clientY});b.options.tint&&"inner"!=b.options.zoomType&&b.zoomTint.bind("mousemove",function(a){if(b.lastX!==a.clientX||b.lastY!==a.clientY)b.setPosition(a),b.currentLoc=a;b.lastX=a.clientX;b.lastY=a.clientY});"inner"==b.options.zoomType&&b.zoomWindow.bind("mousemove",function(a){if(b.lastX!==a.clientX||b.lastY!==a.clientY)b.setPosition(a),b.currentLoc=a;b.lastX=a.clientX;b.lastY=a.clientY});b.zoomContainer.add(b.$elem).mouseenter(function(){!1==b.overWindow&&
|
19
|
+
b.setElements("show")}).mouseleave(function(){b.scrollLock||b.setElements("hide")});"inner"!=b.options.zoomType&&b.zoomWindow.mouseenter(function(){b.overWindow=!0;b.setElements("hide")}).mouseleave(function(){b.overWindow=!1});b.minZoomLevel=b.options.minZoomLevel?b.options.minZoomLevel:2*b.options.scrollZoomIncrement;b.options.scrollZoom&&b.zoomContainer.add(b.$elem).bind("mousewheel DOMMouseScroll MozMousePixelScroll",function(a){b.scrollLock=!0;clearTimeout(d.data(this,"timer"));d.data(this,"timer",
|
20
|
+
setTimeout(function(){b.scrollLock=!1},250));var e=a.originalEvent.wheelDelta||-1*a.originalEvent.detail;a.stopImmediatePropagation();a.stopPropagation();a.preventDefault();0<e/120?b.currentZoomLevel>=b.minZoomLevel&&b.changeZoomLevel(b.currentZoomLevel-b.options.scrollZoomIncrement):b.options.maxZoomLevel?b.currentZoomLevel<=b.options.maxZoomLevel&&b.changeZoomLevel(parseFloat(b.currentZoomLevel)+b.options.scrollZoomIncrement):b.changeZoomLevel(parseFloat(b.currentZoomLevel)+b.options.scrollZoomIncrement);
|
21
|
+
return!1})},setElements:function(b){if(!this.options.zoomEnabled)return!1;"show"==b&&this.isWindowSet&&("inner"==this.options.zoomType&&this.showHideWindow("show"),"window"==this.options.zoomType&&this.showHideWindow("show"),this.options.showLens&&this.showHideLens("show"),this.options.tint&&"inner"!=this.options.zoomType&&this.showHideTint("show"));"hide"==b&&("window"==this.options.zoomType&&this.showHideWindow("hide"),this.options.tint||this.showHideWindow("hide"),this.options.showLens&&this.showHideLens("hide"),
|
22
|
+
this.options.tint&&this.showHideTint("hide"))},setPosition:function(b){if(!this.options.zoomEnabled)return!1;this.nzHeight=this.$elem.height();this.nzWidth=this.$elem.width();this.nzOffset=this.$elem.offset();this.options.tint&&"inner"!=this.options.zoomType&&(this.zoomTint.css({top:0}),this.zoomTint.css({left:0}));this.options.responsive&&!this.options.scrollZoom&&this.options.showLens&&(lensHeight=this.nzHeight<this.options.zoomWindowWidth/this.widthRatio?this.nzHeight:String(this.options.zoomWindowHeight/
|
23
|
+
this.heightRatio),lensWidth=this.largeWidth<this.options.zoomWindowWidth?this.nzWidth:this.options.zoomWindowWidth/this.widthRatio,this.widthRatio=this.largeWidth/this.nzWidth,this.heightRatio=this.largeHeight/this.nzHeight,"lens"!=this.options.zoomType&&(lensHeight=this.nzHeight<this.options.zoomWindowWidth/this.widthRatio?this.nzHeight:String(this.options.zoomWindowHeight/this.heightRatio),lensWidth=this.options.zoomWindowWidth<this.options.zoomWindowWidth?this.nzWidth:this.options.zoomWindowWidth/
|
24
|
+
this.widthRatio,this.zoomLens.css("width",lensWidth),this.zoomLens.css("height",lensHeight),this.options.tint&&(this.zoomTintImage.css("width",this.nzWidth),this.zoomTintImage.css("height",this.nzHeight))),"lens"==this.options.zoomType&&this.zoomLens.css({width:String(this.options.lensSize)+"px",height:String(this.options.lensSize)+"px"}));this.zoomContainer.css({top:this.nzOffset.top});this.zoomContainer.css({left:this.nzOffset.left});this.mouseLeft=parseInt(b.pageX-this.nzOffset.left);this.mouseTop=
|
25
|
+
parseInt(b.pageY-this.nzOffset.top);"window"==this.options.zoomType&&(this.Etoppos=this.mouseTop<this.zoomLens.height()/2,this.Eboppos=this.mouseTop>this.nzHeight-this.zoomLens.height()/2-2*this.options.lensBorderSize,this.Eloppos=this.mouseLeft<0+this.zoomLens.width()/2,this.Eroppos=this.mouseLeft>this.nzWidth-this.zoomLens.width()/2-2*this.options.lensBorderSize);"inner"==this.options.zoomType&&(this.Etoppos=this.mouseTop<this.nzHeight/2/this.heightRatio,this.Eboppos=this.mouseTop>this.nzHeight-
|
26
|
+
this.nzHeight/2/this.heightRatio,this.Eloppos=this.mouseLeft<0+this.nzWidth/2/this.widthRatio,this.Eroppos=this.mouseLeft>this.nzWidth-this.nzWidth/2/this.widthRatio-2*this.options.lensBorderSize);0>=this.mouseLeft||0>this.mouseTop||this.mouseLeft>this.nzWidth||this.mouseTop>this.nzHeight?this.setElements("hide"):(this.options.showLens&&(this.lensLeftPos=String(this.mouseLeft-this.zoomLens.width()/2),this.lensTopPos=String(this.mouseTop-this.zoomLens.height()/2)),this.Etoppos&&(this.lensTopPos=0),
|
27
|
+
this.Eloppos&&(this.tintpos=this.lensLeftPos=this.windowLeftPos=0),"window"==this.options.zoomType&&(this.Eboppos&&(this.lensTopPos=Math.max(this.nzHeight-this.zoomLens.height()-2*this.options.lensBorderSize,0)),this.Eroppos&&(this.lensLeftPos=this.nzWidth-this.zoomLens.width()-2*this.options.lensBorderSize)),"inner"==this.options.zoomType&&(this.Eboppos&&(this.lensTopPos=Math.max(this.nzHeight-2*this.options.lensBorderSize,0)),this.Eroppos&&(this.lensLeftPos=this.nzWidth-this.nzWidth-2*this.options.lensBorderSize)),
|
28
|
+
"lens"==this.options.zoomType&&(this.windowLeftPos=String(-1*((b.pageX-this.nzOffset.left)*this.widthRatio-this.zoomLens.width()/2)),this.windowTopPos=String(-1*((b.pageY-this.nzOffset.top)*this.heightRatio-this.zoomLens.height()/2)),this.zoomLens.css({backgroundPosition:this.windowLeftPos+"px "+this.windowTopPos+"px"}),this.changeBgSize&&(this.nzHeight>this.nzWidth?("lens"==this.options.zoomType&&this.zoomLens.css({"background-size":this.largeWidth/this.newvalueheight+"px "+this.largeHeight/this.newvalueheight+
|
29
|
+
"px"}),this.zoomWindow.css({"background-size":this.largeWidth/this.newvalueheight+"px "+this.largeHeight/this.newvalueheight+"px"})):("lens"==this.options.zoomType&&this.zoomLens.css({"background-size":this.largeWidth/this.newvaluewidth+"px "+this.largeHeight/this.newvaluewidth+"px"}),this.zoomWindow.css({"background-size":this.largeWidth/this.newvaluewidth+"px "+this.largeHeight/this.newvaluewidth+"px"})),this.changeBgSize=!1),this.setWindowPostition(b)),this.options.tint&&"inner"!=this.options.zoomType&&
|
30
|
+
this.setTintPosition(b),"window"==this.options.zoomType&&this.setWindowPostition(b),"inner"==this.options.zoomType&&this.setWindowPostition(b),this.options.showLens&&(this.fullwidth&&"lens"!=this.options.zoomType&&(this.lensLeftPos=0),this.zoomLens.css({left:this.lensLeftPos+"px",top:this.lensTopPos+"px"})))},showHideWindow:function(b){"show"!=b||this.isWindowActive||(this.options.zoomWindowFadeIn?this.zoomWindow.stop(!0,!0,!1).fadeIn(this.options.zoomWindowFadeIn):this.zoomWindow.show(),this.isWindowActive=
|
31
|
+
!0);"hide"==b&&this.isWindowActive&&(this.options.zoomWindowFadeOut?this.zoomWindow.stop(!0,!0).fadeOut(this.options.zoomWindowFadeOut):this.zoomWindow.hide(),this.isWindowActive=!1)},showHideLens:function(b){"show"!=b||this.isLensActive||(this.options.lensFadeIn?this.zoomLens.stop(!0,!0,!1).fadeIn(this.options.lensFadeIn):this.zoomLens.show(),this.isLensActive=!0);"hide"==b&&this.isLensActive&&(this.options.lensFadeOut?this.zoomLens.stop(!0,!0).fadeOut(this.options.lensFadeOut):this.zoomLens.hide(),
|
32
|
+
this.isLensActive=!1)},showHideTint:function(b){"show"!=b||this.isTintActive||(this.options.zoomTintFadeIn?this.zoomTint.css({opacity:this.options.tintOpacity}).animate().stop(!0,!0).fadeIn("slow"):(this.zoomTint.css({opacity:this.options.tintOpacity}).animate(),this.zoomTint.show()),this.isTintActive=!0);"hide"==b&&this.isTintActive&&(this.options.zoomTintFadeOut?this.zoomTint.stop(!0,!0).fadeOut(this.options.zoomTintFadeOut):this.zoomTint.hide(),this.isTintActive=!1)},setLensPostition:function(b){},
|
33
|
+
setWindowPostition:function(b){var a=this;if(isNaN(a.options.zoomWindowPosition))a.externalContainer=d("#"+a.options.zoomWindowPosition),a.externalContainerWidth=a.externalContainer.width(),a.externalContainerHeight=a.externalContainer.height(),a.externalContainerOffset=a.externalContainer.offset(),a.windowOffsetTop=a.externalContainerOffset.top,a.windowOffsetLeft=a.externalContainerOffset.left;else switch(a.options.zoomWindowPosition){case 1:a.windowOffsetTop=a.options.zoomWindowOffety;a.windowOffsetLeft=
|
34
|
+
+a.nzWidth;break;case 2:a.options.zoomWindowHeight>a.nzHeight&&(a.windowOffsetTop=-1*(a.options.zoomWindowHeight/2-a.nzHeight/2),a.windowOffsetLeft=a.nzWidth);break;case 3:a.windowOffsetTop=a.nzHeight-a.zoomWindow.height()-2*a.options.borderSize;a.windowOffsetLeft=a.nzWidth;break;case 4:a.windowOffsetTop=a.nzHeight;a.windowOffsetLeft=a.nzWidth;break;case 5:a.windowOffsetTop=a.nzHeight;a.windowOffsetLeft=a.nzWidth-a.zoomWindow.width()-2*a.options.borderSize;break;case 6:a.options.zoomWindowHeight>
|
35
|
+
a.nzHeight&&(a.windowOffsetTop=a.nzHeight,a.windowOffsetLeft=-1*(a.options.zoomWindowWidth/2-a.nzWidth/2+2*a.options.borderSize));break;case 7:a.windowOffsetTop=a.nzHeight;a.windowOffsetLeft=0;break;case 8:a.windowOffsetTop=a.nzHeight;a.windowOffsetLeft=-1*(a.zoomWindow.width()+2*a.options.borderSize);break;case 9:a.windowOffsetTop=a.nzHeight-a.zoomWindow.height()-2*a.options.borderSize;a.windowOffsetLeft=-1*(a.zoomWindow.width()+2*a.options.borderSize);break;case 10:a.options.zoomWindowHeight>a.nzHeight&&
|
36
|
+
(a.windowOffsetTop=-1*(a.options.zoomWindowHeight/2-a.nzHeight/2),a.windowOffsetLeft=-1*(a.zoomWindow.width()+2*a.options.borderSize));break;case 11:a.windowOffsetTop=a.options.zoomWindowOffety;a.windowOffsetLeft=-1*(a.zoomWindow.width()+2*a.options.borderSize);break;case 12:a.windowOffsetTop=-1*(a.zoomWindow.height()+2*a.options.borderSize);a.windowOffsetLeft=-1*(a.zoomWindow.width()+2*a.options.borderSize);break;case 13:a.windowOffsetTop=-1*(a.zoomWindow.height()+2*a.options.borderSize);a.windowOffsetLeft=
|
37
|
+
0;break;case 14:a.options.zoomWindowHeight>a.nzHeight&&(a.windowOffsetTop=-1*(a.zoomWindow.height()+2*a.options.borderSize),a.windowOffsetLeft=-1*(a.options.zoomWindowWidth/2-a.nzWidth/2+2*a.options.borderSize));break;case 15:a.windowOffsetTop=-1*(a.zoomWindow.height()+2*a.options.borderSize);a.windowOffsetLeft=a.nzWidth-a.zoomWindow.width()-2*a.options.borderSize;break;case 16:a.windowOffsetTop=-1*(a.zoomWindow.height()+2*a.options.borderSize);a.windowOffsetLeft=a.nzWidth;break;default:a.windowOffsetTop=
|
38
|
+
a.options.zoomWindowOffety,a.windowOffsetLeft=a.nzWidth}a.isWindowSet=!0;a.windowOffsetTop+=a.options.zoomWindowOffety;a.windowOffsetLeft+=a.options.zoomWindowOffetx;a.zoomWindow.css({top:a.windowOffsetTop});a.zoomWindow.css({left:a.windowOffsetLeft});"inner"==a.options.zoomType&&(a.zoomWindow.css({top:0}),a.zoomWindow.css({left:0}));a.windowLeftPos=String(-1*((b.pageX-a.nzOffset.left)*a.widthRatio-a.zoomWindow.width()/2));a.windowTopPos=String(-1*((b.pageY-a.nzOffset.top)*a.heightRatio-a.zoomWindow.height()/
|
39
|
+
2));a.Etoppos&&(a.windowTopPos=0);a.Eloppos&&(a.windowLeftPos=0);a.Eboppos&&(a.windowTopPos=-1*(a.largeHeight/a.currentZoomLevel-a.zoomWindow.height()));a.Eroppos&&(a.windowLeftPos=-1*(a.largeWidth/a.currentZoomLevel-a.zoomWindow.width()));a.fullheight&&(a.windowTopPos=0);a.fullwidth&&(a.windowLeftPos=0);if("window"==a.options.zoomType||"inner"==a.options.zoomType)1==a.zoomLock&&(1>=a.widthRatio&&(a.windowLeftPos=0),1>=a.heightRatio&&(a.windowTopPos=0)),a.largeHeight<a.options.zoomWindowHeight&&(a.windowTopPos=
|
40
|
+
0),a.largeWidth<a.options.zoomWindowWidth&&(a.windowLeftPos=0),a.options.easing?(a.xp||(a.xp=0),a.yp||(a.yp=0),a.loop||(a.loop=setInterval(function(){a.xp+=(a.windowLeftPos-a.xp)/a.options.easingAmount;a.yp+=(a.windowTopPos-a.yp)/a.options.easingAmount;a.scrollingLock?(clearInterval(a.loop),a.xp=a.windowLeftPos,a.yp=a.windowTopPos,a.xp=-1*((b.pageX-a.nzOffset.left)*a.widthRatio-a.zoomWindow.width()/2),a.yp=-1*((b.pageY-a.nzOffset.top)*a.heightRatio-a.zoomWindow.height()/2),a.changeBgSize&&(a.nzHeight>
|
41
|
+
a.nzWidth?("lens"==a.options.zoomType&&a.zoomLens.css({"background-size":a.largeWidth/a.newvalueheight+"px "+a.largeHeight/a.newvalueheight+"px"}),a.zoomWindow.css({"background-size":a.largeWidth/a.newvalueheight+"px "+a.largeHeight/a.newvalueheight+"px"})):("lens"!=a.options.zoomType&&a.zoomLens.css({"background-size":a.largeWidth/a.newvaluewidth+"px "+a.largeHeight/a.newvalueheight+"px"}),a.zoomWindow.css({"background-size":a.largeWidth/a.newvaluewidth+"px "+a.largeHeight/a.newvaluewidth+"px"})),
|
42
|
+
a.changeBgSize=!1),a.zoomWindow.css({backgroundPosition:a.windowLeftPos+"px "+a.windowTopPos+"px"}),a.scrollingLock=!1,a.loop=!1):(a.changeBgSize&&(a.nzHeight>a.nzWidth?("lens"==a.options.zoomType&&a.zoomLens.css({"background-size":a.largeWidth/a.newvalueheight+"px "+a.largeHeight/a.newvalueheight+"px"}),a.zoomWindow.css({"background-size":a.largeWidth/a.newvalueheight+"px "+a.largeHeight/a.newvalueheight+"px"})):("lens"!=a.options.zoomType&&a.zoomLens.css({"background-size":a.largeWidth/a.newvaluewidth+
|
43
|
+
"px "+a.largeHeight/a.newvaluewidth+"px"}),a.zoomWindow.css({"background-size":a.largeWidth/a.newvaluewidth+"px "+a.largeHeight/a.newvaluewidth+"px"})),a.changeBgSize=!1),a.zoomWindow.css({backgroundPosition:a.xp+"px "+a.yp+"px"}))},16))):(a.changeBgSize&&(a.nzHeight>a.nzWidth?("lens"==a.options.zoomType&&a.zoomLens.css({"background-size":a.largeWidth/a.newvalueheight+"px "+a.largeHeight/a.newvalueheight+"px"}),a.zoomWindow.css({"background-size":a.largeWidth/a.newvalueheight+"px "+a.largeHeight/
|
44
|
+
a.newvalueheight+"px"})):("lens"==a.options.zoomType&&a.zoomLens.css({"background-size":a.largeWidth/a.newvaluewidth+"px "+a.largeHeight/a.newvaluewidth+"px"}),a.largeHeight/a.newvaluewidth<a.options.zoomWindowHeight?a.zoomWindow.css({"background-size":a.largeWidth/a.newvaluewidth+"px "+a.largeHeight/a.newvaluewidth+"px"}):a.zoomWindow.css({"background-size":a.largeWidth/a.newvalueheight+"px "+a.largeHeight/a.newvalueheight+"px"})),a.changeBgSize=!1),a.zoomWindow.css({backgroundPosition:a.windowLeftPos+
|
45
|
+
"px "+a.windowTopPos+"px"}))},setTintPosition:function(b){this.nzOffset=this.$elem.offset();this.tintpos=String(-1*(b.pageX-this.nzOffset.left-this.zoomLens.width()/2));this.tintposy=String(-1*(b.pageY-this.nzOffset.top-this.zoomLens.height()/2));this.Etoppos&&(this.tintposy=0);this.Eloppos&&(this.tintpos=0);this.Eboppos&&(this.tintposy=-1*(this.nzHeight-this.zoomLens.height()-2*this.options.lensBorderSize));this.Eroppos&&(this.tintpos=-1*(this.nzWidth-this.zoomLens.width()-2*this.options.lensBorderSize));
|
46
|
+
this.options.tint&&(this.fullheight&&(this.tintposy=0),this.fullwidth&&(this.tintpos=0),this.zoomTintImage.css({left:this.tintpos+"px"}),this.zoomTintImage.css({top:this.tintposy+"px"}))},swaptheimage:function(b,a){var c=this,e=new Image;c.options.loadingIcon&&(c.spinner=d("<div style=\"background: url('"+c.options.loadingIcon+"') no-repeat center;height:"+c.nzHeight+"px;width:"+c.nzWidth+'px;z-index: 2000;position: absolute; background-position: center center;"></div>'),c.$elem.after(c.spinner));
|
47
|
+
c.options.onImageSwap(c.$elem);e.onload=function(){c.largeWidth=e.width;c.largeHeight=e.height;c.zoomImage=a;c.zoomWindow.css({"background-size":c.largeWidth+"px "+c.largeHeight+"px"});c.zoomWindow.css({"background-size":c.largeWidth+"px "+c.largeHeight+"px"});c.swapAction(b,a)};e.src=a},swapAction:function(b,a){var c=this,e=new Image;e.onload=function(){c.nzHeight=e.height;c.nzWidth=e.width;c.options.onImageSwapComplete(c.$elem);c.doneCallback()};e.src=b;c.currentZoomLevel=c.options.zoomLevel;c.options.maxZoomLevel=
|
48
|
+
!1;"lens"==c.options.zoomType&&c.zoomLens.css({backgroundImage:"url('"+a+"')"});"window"==c.options.zoomType&&c.zoomWindow.css({backgroundImage:"url('"+a+"')"});"inner"==c.options.zoomType&&c.zoomWindow.css({backgroundImage:"url('"+a+"')"});c.currentImage=a;if(c.options.imageCrossfade){var f=c.$elem,g=f.clone();c.$elem.attr("src",b);c.$elem.after(g);g.stop(!0).fadeOut(c.options.imageCrossfade,function(){d(this).remove()});c.$elem.width("auto").removeAttr("width");c.$elem.height("auto").removeAttr("height");
|
49
|
+
f.fadeIn(c.options.imageCrossfade);c.options.tint&&"inner"!=c.options.zoomType&&(f=c.zoomTintImage,g=f.clone(),c.zoomTintImage.attr("src",a),c.zoomTintImage.after(g),g.stop(!0).fadeOut(c.options.imageCrossfade,function(){d(this).remove()}),f.fadeIn(c.options.imageCrossfade),c.zoomTint.css({height:c.$elem.height()}),c.zoomTint.css({width:c.$elem.width()}));c.zoomContainer.css("height",c.$elem.height());c.zoomContainer.css("width",c.$elem.width());"inner"!=c.options.zoomType||c.options.constrainType||
|
50
|
+
(c.zoomWrap.parent().css("height",c.$elem.height()),c.zoomWrap.parent().css("width",c.$elem.width()),c.zoomWindow.css("height",c.$elem.height()),c.zoomWindow.css("width",c.$elem.width()))}else c.$elem.attr("src",b),c.options.tint&&(c.zoomTintImage.attr("src",a),c.zoomTintImage.attr("height",c.$elem.height()),c.zoomTintImage.css({height:c.$elem.height()}),c.zoomTint.css({height:c.$elem.height()})),c.zoomContainer.css("height",c.$elem.height()),c.zoomContainer.css("width",c.$elem.width());c.options.imageCrossfade&&
|
51
|
+
(c.zoomWrap.css("height",c.$elem.height()),c.zoomWrap.css("width",c.$elem.width()));c.options.constrainType&&("height"==c.options.constrainType&&(c.zoomContainer.css("height",c.options.constrainSize),c.zoomContainer.css("width","auto"),c.options.imageCrossfade?(c.zoomWrap.css("height",c.options.constrainSize),c.zoomWrap.css("width","auto"),c.constwidth=c.zoomWrap.width()):(c.$elem.css("height",c.options.constrainSize),c.$elem.css("width","auto"),c.constwidth=c.$elem.width()),"inner"==c.options.zoomType&&
|
52
|
+
(c.zoomWrap.parent().css("height",c.options.constrainSize),c.zoomWrap.parent().css("width",c.constwidth),c.zoomWindow.css("height",c.options.constrainSize),c.zoomWindow.css("width",c.constwidth)),c.options.tint&&(c.tintContainer.css("height",c.options.constrainSize),c.tintContainer.css("width",c.constwidth),c.zoomTint.css("height",c.options.constrainSize),c.zoomTint.css("width",c.constwidth),c.zoomTintImage.css("height",c.options.constrainSize),c.zoomTintImage.css("width",c.constwidth))),"width"==
|
53
|
+
c.options.constrainType&&(c.zoomContainer.css("height","auto"),c.zoomContainer.css("width",c.options.constrainSize),c.options.imageCrossfade?(c.zoomWrap.css("height","auto"),c.zoomWrap.css("width",c.options.constrainSize),c.constheight=c.zoomWrap.height()):(c.$elem.css("height","auto"),c.$elem.css("width",c.options.constrainSize),c.constheight=c.$elem.height()),"inner"==c.options.zoomType&&(c.zoomWrap.parent().css("height",c.constheight),c.zoomWrap.parent().css("width",c.options.constrainSize),c.zoomWindow.css("height",
|
54
|
+
c.constheight),c.zoomWindow.css("width",c.options.constrainSize)),c.options.tint&&(c.tintContainer.css("height",c.constheight),c.tintContainer.css("width",c.options.constrainSize),c.zoomTint.css("height",c.constheight),c.zoomTint.css("width",c.options.constrainSize),c.zoomTintImage.css("height",c.constheight),c.zoomTintImage.css("width",c.options.constrainSize))))},doneCallback:function(){this.options.loadingIcon&&this.spinner.hide();this.nzOffset=this.$elem.offset();this.nzWidth=this.$elem.width();
|
55
|
+
this.nzHeight=this.$elem.height();this.currentZoomLevel=this.options.zoomLevel;this.widthRatio=this.largeWidth/this.nzWidth;this.heightRatio=this.largeHeight/this.nzHeight;"window"==this.options.zoomType&&(lensHeight=this.nzHeight<this.options.zoomWindowWidth/this.widthRatio?this.nzHeight:String(this.options.zoomWindowHeight/this.heightRatio),lensWidth=this.options.zoomWindowWidth<this.options.zoomWindowWidth?this.nzWidth:this.options.zoomWindowWidth/this.widthRatio,this.zoomLens&&(this.zoomLens.css("width",
|
56
|
+
lensWidth),this.zoomLens.css("height",lensHeight)))},getCurrentImage:function(){return this.zoomImage},getGalleryList:function(){var b=this;b.gallerylist=[];b.options.gallery?d("#"+b.options.gallery+" a").each(function(){var a="";d(this).data("zoom-image")?a=d(this).data("zoom-image"):d(this).data("image")&&(a=d(this).data("image"));a==b.zoomImage?b.gallerylist.unshift({href:""+a+"",title:d(this).find("img").attr("title")}):b.gallerylist.push({href:""+a+"",title:d(this).find("img").attr("title")})}):
|
57
|
+
b.gallerylist.push({href:""+b.zoomImage+"",title:d(this).find("img").attr("title")});return b.gallerylist},changeZoomLevel:function(b){this.scrollingLock=!0;this.newvalue=parseFloat(b).toFixed(2);newvalue=parseFloat(b).toFixed(2);maxheightnewvalue=this.largeHeight/(this.options.zoomWindowHeight/this.nzHeight*this.nzHeight);maxwidthtnewvalue=this.largeWidth/(this.options.zoomWindowWidth/this.nzWidth*this.nzWidth);"inner"!=this.options.zoomType&&(maxheightnewvalue<=newvalue?(this.heightRatio=this.largeHeight/
|
58
|
+
maxheightnewvalue/this.nzHeight,this.newvalueheight=maxheightnewvalue,this.fullheight=!0):(this.heightRatio=this.largeHeight/newvalue/this.nzHeight,this.newvalueheight=newvalue,this.fullheight=!1),maxwidthtnewvalue<=newvalue?(this.widthRatio=this.largeWidth/maxwidthtnewvalue/this.nzWidth,this.newvaluewidth=maxwidthtnewvalue,this.fullwidth=!0):(this.widthRatio=this.largeWidth/newvalue/this.nzWidth,this.newvaluewidth=newvalue,this.fullwidth=!1),"lens"==this.options.zoomType&&(maxheightnewvalue<=newvalue?
|
59
|
+
(this.fullwidth=!0,this.newvaluewidth=maxheightnewvalue):(this.widthRatio=this.largeWidth/newvalue/this.nzWidth,this.newvaluewidth=newvalue,this.fullwidth=!1)));"inner"==this.options.zoomType&&(maxheightnewvalue=parseFloat(this.largeHeight/this.nzHeight).toFixed(2),maxwidthtnewvalue=parseFloat(this.largeWidth/this.nzWidth).toFixed(2),newvalue>maxheightnewvalue&&(newvalue=maxheightnewvalue),newvalue>maxwidthtnewvalue&&(newvalue=maxwidthtnewvalue),maxheightnewvalue<=newvalue?(this.heightRatio=this.largeHeight/
|
60
|
+
newvalue/this.nzHeight,this.newvalueheight=newvalue>maxheightnewvalue?maxheightnewvalue:newvalue,this.fullheight=!0):(this.heightRatio=this.largeHeight/newvalue/this.nzHeight,this.newvalueheight=newvalue>maxheightnewvalue?maxheightnewvalue:newvalue,this.fullheight=!1),maxwidthtnewvalue<=newvalue?(this.widthRatio=this.largeWidth/newvalue/this.nzWidth,this.newvaluewidth=newvalue>maxwidthtnewvalue?maxwidthtnewvalue:newvalue,this.fullwidth=!0):(this.widthRatio=this.largeWidth/newvalue/this.nzWidth,this.newvaluewidth=
|
61
|
+
newvalue,this.fullwidth=!1));scrcontinue=!1;"inner"==this.options.zoomType&&(this.nzWidth>this.nzHeight&&(this.newvaluewidth<=maxwidthtnewvalue?scrcontinue=!0:(scrcontinue=!1,this.fullwidth=this.fullheight=!0)),this.nzHeight>this.nzWidth&&(this.newvaluewidth<=maxwidthtnewvalue?scrcontinue=!0:(scrcontinue=!1,this.fullwidth=this.fullheight=!0)));"inner"!=this.options.zoomType&&(scrcontinue=!0);scrcontinue&&(this.zoomLock=0,this.changeZoom=!0,this.options.zoomWindowHeight/this.heightRatio<=this.nzHeight&&
|
62
|
+
(this.currentZoomLevel=this.newvalueheight,"lens"!=this.options.zoomType&&"inner"!=this.options.zoomType&&(this.changeBgSize=!0,this.zoomLens.css({height:String(this.options.zoomWindowHeight/this.heightRatio)+"px"})),"lens"==this.options.zoomType||"inner"==this.options.zoomType)&&(this.changeBgSize=!0),this.options.zoomWindowWidth/this.widthRatio<=this.nzWidth&&("inner"!=this.options.zoomType&&this.newvaluewidth>this.newvalueheight&&(this.currentZoomLevel=this.newvaluewidth),"lens"!=this.options.zoomType&&
|
63
|
+
"inner"!=this.options.zoomType&&(this.changeBgSize=!0,this.zoomLens.css({width:String(this.options.zoomWindowWidth/this.widthRatio)+"px"})),"lens"==this.options.zoomType||"inner"==this.options.zoomType)&&(this.changeBgSize=!0),"inner"==this.options.zoomType&&(this.changeBgSize=!0,this.nzWidth>this.nzHeight&&(this.currentZoomLevel=this.newvaluewidth),this.nzHeight>this.nzWidth&&(this.currentZoomLevel=this.newvaluewidth)));this.setPosition(this.currentLoc)},closeAll:function(){self.zoomWindow&&self.zoomWindow.hide();
|
64
|
+
self.zoomLens&&self.zoomLens.hide();self.zoomTint&&self.zoomTint.hide()},changeState:function(b){"enable"==b&&(this.options.zoomEnabled=!0);"disable"==b&&(this.options.zoomEnabled=!1)}};d.fn.elevateZoom=function(b){return this.each(function(){var a=Object.create(k);a.init(b,this);d.data(this,"elevateZoom",a)})};d.fn.elevateZoom.options={zoomActivation:"hover",zoomEnabled:!0,preloading:1,zoomLevel:1,scrollZoom:!1,scrollZoomIncrement:0.1,minZoomLevel:!1,maxZoomLevel:!1,easing:!1,easingAmount:12,lensSize:200,
|
65
|
+
zoomWindowWidth:400,zoomWindowHeight:400,zoomWindowOffetx:0,zoomWindowOffety:0,zoomWindowPosition:1,zoomWindowBgColour:"#fff",lensFadeIn:!1,lensFadeOut:!1,debug:!1,zoomWindowFadeIn:!1,zoomWindowFadeOut:!1,zoomWindowAlwaysShow:!1,zoomTintFadeIn:!1,zoomTintFadeOut:!1,borderSize:4,showLens:!0,borderColour:"#888",lensBorderSize:1,lensBorderColour:"#000",lensShape:"square",zoomType:"window",containLensZoom:!1,lensColour:"white",lensOpacity:0.4,lenszoom:!1,tint:!1,tintColour:"#333",tintOpacity:0.4,gallery:!1,
|
66
|
+
galleryActiveClass:"zoomGalleryActive",imageCrossfade:!1,constrainType:!1,constrainSize:!1,loadingIcon:!1,cursor:"default",responsive:!0,onComplete:d.noop,onZoomedImageLoaded:function(){},onImageSwap:d.noop,onImageSwapComplete:d.noop}})(jQuery,window,document);
|
@@ -0,0 +1,1777 @@
|
|
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 );
|