-
Notifications
You must be signed in to change notification settings - Fork 39
/
jquery.fs.zoomer.min.js
1 lines (1 loc) · 16.9 KB
/
jquery.fs.zoomer.min.js
1
(function(n,t){"use strict";function g(t){var i,u,f;for(t=n.extend({},h,d,t),s=bt(),i=n(this),u=0,f=i.length;u<f;u++)nt(i.eq(u),t);return r=n(".zoomer-element"),pt(),i}function nt(t,i){var f,r;if(!t.data("zoomer")){i=n.extend({},i,t.data("zoomer-options"));f=t.parent();i.$target=t;i.marginReal=i.marginMin*2;i.originalDOM=i.$target.html();i.$target.find("img").length>0&&(i.source=[],i.$target.find("img").each(function(){i.source.push(n(this).attr("src"))}),i.$target.empty());i=b(i);r='<div class="zoomer '+i.customClass+'">';r+='<div class="zoomer-positioner">';r+='<div class="zoomer-holder">';r+="<\/div>";r+="<\/div>";r+="<\/div>";i.$zoomer=n(r);i.$target.addClass("zoomer-element").html(i.$zoomer);i.controls.zoomIn||i.controls.zoomOut||i.controls.next||i.controls.previous?(i.controls.$zoomIn=n(i.controls.zoomIn,f),i.controls.$zoomOut=n(i.controls.zoomOut,f),i.controls.$next=n(i.controls.next,f),i.controls.$previous=n(i.controls.previous,f)):(r='<div class="zoomer-controls zoomer-controls-'+i.controls.position+'">',r+='<span class="zoomer-previous">‹<\/span>',r+='<span class="zoomer-zoom-out">-<\/span>',r+='<span class="zoomer-zoom-in">+<\/span>',r+='<span class="zoomer-next">›<\/span>',r+="<\/div>",i.$zoomer.append(r),i.controls.$default=i.$zoomer.find(".zoomer-controls"),i.controls.$zoomIn=i.$zoomer.find(".zoomer-zoom-in"),i.controls.$zoomOut=i.$zoomer.find(".zoomer-zoom-out"),i.controls.$next=i.$zoomer.find(".zoomer-next"),i.controls.$previous=i.$zoomer.find(".zoomer-previous"));i.$positioner=i.$zoomer.find(".zoomer-positioner");i.$holder=i.$zoomer.find(".zoomer-holder");i.controls.$zoomIn.on("touchstart.zoomer mousedown.zoomer",i,ot).on("touchend.zoomer mouseup.zoomer",i,p);i.controls.$zoomOut.on("touchstart.zoomer mousedown.zoomer",i,st).on("touchend.zoomer mouseup.zoomer",i,p);i.controls.$next.on("click.zoomer",i,ft);i.controls.$previous.on("click.zoomer",i,et);i.$zoomer.on("mousedown.zoomer",i,ht).on("touchstart.zoomer MSPointerDown.zoomer",":not(.zoomer-controls)",i,l);i.$target.data("zoomer",i);u.resize.apply(i.$target);i.images.length>0&&e.apply(i.$target,[i])}}function e(n){n.gallery?n.$zoomer.addClass("zoomer-gallery"):n.$zoomer.removeClass("zoomer-gallery");typeof n.$image!="undefined"?n.$holder.animate({opacity:0},300,function(){u.unload.apply(n.$target);a.apply(n.$target,[n,n.images[n.index]])}):a.apply(n.$target,[n,n.images[n.index]])}function a(t,i){var u,r,f;if(t.loading=!0,t.tiled){t.tilesTotal=0;t.tilesLoaded=0;u='<div class="zoomer-tiles">';for(r in t.images[0])if(t.images[0].hasOwnProperty(r))for(f in t.images[0][r])t.images[0][r].hasOwnProperty(f)&&(u+='<img class="zoomer-image zoomer-tile" src="'+t.images[0][r][f]+'" data-zoomer-tile="'+r+"-"+f+'" />',t.tilesTotal++);u+="<\/div>";t.$image=n(u);t.$tiles=t.$image.find("img");t.$tiles.each(function(i,r){var u=n(r);u.one("load",t,tt);u[0].complete&&u.trigger("load")})}else t.$image=n('<img class="zoomer-image" />'),t.$image.one("load.zoomer",t,v).attr("src",i),t.$image[0].complete&&t.$image.trigger("load")}function tt(n){var t=n.data;t.tilesLoaded++;t.tilesLoaded===t.tilesTotal&&(t.tiledRows=t.images[0].length,t.tiledColumns=t.images[0][0].length,t.tiledHeight=t.$tiles.eq(0)[0].naturalHeight*t.tiledRows,t.tiledWidth=t.$tiles.eq(0)[0].naturalWidth*t.tiledColumns,v({data:t}))}function v(t){var i=t.data,r,u;i.tiled?(i.naturalHeight=i.tiledHeight,i.naturalWidth=i.tiledWidth):(i.naturalHeight=i.$image[0].naturalHeight,i.naturalWidth=i.$image[0].naturalWidth);i.retina&&(i.naturalHeight/=2,i.naturalWidth/=2);i.$holder.css({height:i.naturalHeight,width:i.naturalWidth});i.targetImageHeight=i.minHeight=i.maxHeight=i.naturalHeight;i.targetImageWidth=i.minWidth=i.maxWidth=i.naturalWidth;i.imageRatioWide=i.naturalWidth/i.naturalHeight;i.imageRatioTall=i.naturalHeight/i.naturalWidth;(i.naturalHeight>i.frameHeight-i.marginReal||i.naturalWidth>i.frameWidth-i.marginReal)&&(i=y(i),i.targetImageHeight=i.minHeight,i.targetImageWidth=i.minWidth);i.positionerLeft=i.targetPositionerLeft=i.centerLeft;i.positionerTop=i.targetPositionerTop=i.centerTop;i.imageLeft=i.targetImageLeft=Math.round(-i.targetImageWidth/2);i.imageTop=i.targetImageTop=Math.round(-i.targetImageHeight/2);i.imageHeight=i.targetImageHeight;i.imageWidth=i.targetImageWidth;s?(r=i.imageWidth/i.naturalWidth,u=i.imageHeight/i.naturalHeight,i.$positioner.css(o("transform","translate3d("+i.positionerLeft+"px, "+i.positionerTop+"px, 0)")),i.$holder.css(o("transform","translate3d(-50%, -50%, 0) scale("+r+","+u+")"))):(i.$positioner.css({left:i.positionerLeft,top:i.positionerTop}),i.$holder.css({left:i.imageLeft,top:i.imageTop,height:i.imageHeight,width:i.imageWidth}));i.$holder.append(i.$image);i.tiled&&(i.$holder.css({background:"url("+i.tiledThumbnail+") no-repeat left top",backgroundSize:"100% 100%"}),i.tileHeightPercentage=100/i.tiledRows,i.tileWidthPercentage=100/i.tiledColumns,i.$tiles.css({height:i.tileHeightPercentage+"%",width:i.tileWidthPercentage+"%"}),i.$tiles.each(function(t,r){var u=n(r),f=u.data("zoomer-tile").split("-");u.css({left:i.tileWidthPercentage*parseInt(f[1],10)+"%",top:i.tileHeightPercentage*parseInt(f[0],10)+"%"})}));i.$holder.animate({opacity:1},300);i.loading=!1;i.gallery&&it(i)}function it(t){t.index>0&&n('<img src="'+t.images[t.index-1]+'">');t.index<t.images.length-1&&n('<img src="'+t.images[t.index+1]+'">')}function y(n){return n.naturalHeight>n.naturalWidth?(n.aspect="tall",n.minHeight=Math.round(n.frameHeight-n.marginReal),n.minWidth=Math.round(n.minHeight/n.imageRatioTall),n.minWidth>n.frameWidth-n.marginReal&&(n.minWidth=Math.round(n.frameWidth-n.marginReal),n.minHeight=Math.round(n.minWidth/n.imageRatioWide))):(n.aspect="wide",n.minWidth=Math.round(n.frameWidth-n.marginReal),n.minHeight=Math.round(n.minWidth/n.imageRatioWide),n.minHeight>n.frameHeight-n.marginReal&&(n.minHeight=Math.round(n.frameHeight-n.marginReal),n.minWidth=Math.round(n.minHeight/n.imageRatioTall))),n}function rt(){for(var n,u,f,t=0,i=r.length;t<i;t++)n=r.eq(t).data("zoomer"),typeof n=="object"&&(n=ut(n),n.lastAction=n.action,s?(u=n.imageWidth/n.naturalWidth,f=n.imageHeight/n.naturalHeight,n.$positioner.css(o("transform","translate3d("+n.positionerLeft+"px, "+n.positionerTop+"px, 0)")),n.$holder.css(o("transform","translate3d(-50%, -50%, 0) scale("+u+","+f+")"))):(n.$positioner.css({left:n.positionerLeft,top:n.positionerTop}),n.$holder.css({left:n.imageLeft,top:n.imageTop,width:n.imageWidth,height:n.imageHeight})),n.callback&&n.callback.apply(n.$zoomer,[(n.imageWidth-n.minWidth)/(n.maxWidth-n.minWidth)]))}function ut(n){if(n.action==="zoom_in"||n.action==="zoom_out"){n.keyDownTime+=n.increment;var t=(n.action==="zoom_out"?-1:1)*Math.round(n.imageWidth*n.keyDownTime-n.imageWidth);n.aspect==="tall"?(n.targetImageHeight+=t,n.targetImageWidth=Math.round(n.targetImageHeight/n.imageRatioTall)):(n.targetImageWidth+=t,n.targetImageHeight=Math.round(n.targetImageWidth/n.imageRatioWide))}return n.aspect==="tall"?n.targetImageHeight<n.minHeight?(n.targetImageHeight=n.minHeight,n.targetImageWidth=Math.round(n.targetImageHeight/n.imageRatioTall)):n.targetImageHeight>n.maxHeight&&(n.targetImageHeight=n.maxHeight,n.targetImageWidth=Math.round(n.targetImageHeight/n.imageRatioTall)):n.targetImageWidth<n.minWidth?(n.targetImageWidth=n.minWidth,n.targetImageHeight=Math.round(n.targetImageWidth/n.imageRatioWide)):n.targetImageWidth>n.maxWidth&&(n.targetImageWidth=n.maxWidth,n.targetImageHeight=Math.round(n.targetImageWidth/n.imageRatioWide)),n.targetImageLeft=Math.round(-n.targetImageWidth*.5),n.targetImageTop=Math.round(-n.targetImageHeight*.5),n.action==="drag"||n.action==="pinch"?(n.imageWidth=n.targetImageWidth,n.imageHeight=n.targetImageHeight,n.imageLeft=n.targetImageLeft,n.imageTop=n.targetImageTop):(n.imageWidth+=Math.round((n.targetImageWidth-n.imageWidth)*n.enertia),n.imageHeight+=Math.round((n.targetImageHeight-n.imageHeight)*n.enertia),n.imageLeft+=Math.round((n.targetImageLeft-n.imageLeft)*n.enertia),n.imageTop+=Math.round((n.targetImageTop-n.imageTop)*n.enertia)),n.boundsLeft=Math.round(n.frameWidth-n.targetImageWidth*.5-n.marginMax),n.boundsRight=Math.round(n.targetImageWidth*.5+n.marginMax),n.boundsTop=Math.round(n.frameHeight-n.targetImageHeight*.5-n.marginMax),n.boundsBottom=Math.round(n.targetImageHeight*.5+n.marginMax),n.targetPositionerLeft<n.boundsLeft&&(n.targetPositionerLeft=n.boundsLeft),n.targetPositionerLeft>n.boundsRight&&(n.targetPositionerLeft=n.boundsRight),n.targetPositionerTop<n.boundsTop&&(n.targetPositionerTop=n.boundsTop),n.targetPositionerTop>n.boundsBottom&&(n.targetPositionerTop=n.boundsBottom),n.zoomPositionTop>0&&n.zoomPositionLeft>0&&(n.targetPositionerLeft=n.centerLeft-n.targetImageLeft-n.targetImageWidth*n.zoomPositionLeft,n.targetPositionerTop=n.centerTop-n.targetImageTop-n.targetImageHeight*n.zoomPositionTop),n.action!=="pinch"&&(n.targetImageWidth<n.frameWidth&&(n.targetPositionerLeft=n.centerLeft),n.targetImageHeight<n.frameHeight&&(n.targetPositionerTop=n.centerTop)),n.action==="drag"||n.action==="pinch"?(n.positionerLeft=n.targetPositionerLeft,n.positionerTop=n.targetPositionerTop):(n.positionerLeft+=Math.round((n.targetPositionerLeft-n.positionerLeft)*n.enertia),n.positionerTop+=Math.round((n.targetPositionerTop-n.positionerTop)*n.enertia)),n.oldImageWidth=n.imageWidth,n.oldImageHeight=n.imageHeight,n}function ft(n){var t=n.data;!t.loading&&t.index+1<t.images.length&&(t.index++,e.apply(t.$target,[t]))}function et(n){var t=n.data;!t.loading&&t.index-1>=0&&(t.index--,e.apply(t.$target,[t]))}function ot(n){n.preventDefault();n.stopPropagation();var t=n.data;t=c(t);t.keyDownTime=1;t.action="zoom_in"}function st(n){n.preventDefault();n.stopPropagation();var t=n.data;t=c(t);t.keyDownTime=1;t.action="zoom_out"}function p(n){n.preventDefault();n.stopPropagation();var t=n.data;t=w(t);t.keyDownTime=0;t.action=""}function c(n,t,i){return t=t||n.imageWidth*.5,i=i||n.imageHeight*.5,n.zoomPositionLeft=(t-(n.positionerLeft-n.centerLeft))/n.imageWidth,n.zoomPositionTop=(i-(n.positionerTop-n.centerTop))/n.imageHeight,n}function w(n){return n.zoomPositionTop=0,n.zoomPositionLeft=0,n}function ht(n){n.preventDefault&&(n.preventDefault(),n.stopPropagation());var t=n.data;t.action="drag";t.mouseX=n.pageX;t.mouseY=n.pageY;t.targetPositionerLeft=t.positionerLeft;t.targetPositionerTop=t.positionerTop;i.on("mousemove.zoomer",t,ct).on("mouseup.zoomer",t,lt)}function ct(n){n.preventDefault&&(n.preventDefault(),n.stopPropagation());var t=n.data;n.pageX&&n.pageY&&(t.targetPositionerLeft-=Math.round(t.mouseX-n.pageX),t.targetPositionerTop-=Math.round(t.mouseY-n.pageY),t.mouseX=n.pageX,t.mouseY=n.pageY)}function lt(n){n.preventDefault&&(n.preventDefault(),n.stopPropagation());var t=n.data;t.action="";i.off("mousemove.zoomer mouseup.zoomer")}function l(t){var r,i,f,u;if(!(n(t.target).parent(".zoomer-controls").length>0)){if(t.preventManipulation&&t.preventManipulation(),t.preventDefault(),t.stopPropagation(),r=t.data,i=t.originalEvent,i.type.match(/(up|end)$/i)){yt(r,i);return}if(i.pointerId){f=!1;for(u in r.touches)r.touches[u].identifier===i.pointerId&&(f=!0,r.touches[u].pageX=i.clientX,r.touches[u].pageY=i.clientY);f||r.touches.push({identifier:i.pointerId,pageX:i.clientX,pageY:i.clientY})}else r.touches=i.touches;i.type.match(/(down|start)$/i)?at(r):i.type.match(/move$/i)&&vt(r)}}function at(n){if(!n.touchEventsBound){n.touchEventsBound=!0;i.on("touchmove.zoomer MSPointerMove.zoomer",n,l).on("touchend.zoomer MSPointerUp.zoomer",n,l)}n.zoomPercentage=1;n.touches.length>=2&&(n.offset=n.$zoomer.offset(),n.pinchStartX0=n.touches[0].pageX-n.offset.left,n.pinchStartY0=n.touches[0].pageY-n.offset.top,n.pinchStartX1=n.touches[1].pageX-n.offset.left,n.pinchStartY1=n.touches[1].pageY-n.offset.top,n.pinchStartX=(n.pinchStartX0+n.pinchStartX1)/2,n.pinchStartY=(n.pinchStartY0+n.pinchStartY1)/2,n.imageWidthStart=n.imageWidth,n.imageHeightStart=n.imageHeight,c(n),n.pinchDeltaStart=Math.sqrt(Math.pow(n.pinchStartX1-n.pinchStartX0,2)+Math.pow(n.pinchStartY1-n.pinchStartY0,2)));n.mouseX=n.touches[0].pageX;n.mouseY=n.touches[0].pageY}function vt(n){n.touches.length===1?(n.action="drag",n.targetPositionerLeft-=n.mouseX-n.touches[0].pageX,n.targetPositionerTop-=n.mouseY-n.touches[0].pageY):n.touches.length>=2&&(n.action="pinch",n.pinchEndX0=n.touches[0].pageX-n.offset.left,n.pinchEndY0=n.touches[0].pageY-n.offset.top,n.pinchEndX1=n.touches[1].pageX-n.offset.left,n.pinchEndY1=n.touches[1].pageY-n.offset.top,(n.pinchEndX0!==n.lastPinchEndX0||n.pinchEndY0!==n.lastPinchEndY0||n.pinchEndX1!==n.lastPinchEndX1||n.pinchEndY1!==n.lastPinchEndY1)&&(n.pinchDeltaEnd=Math.sqrt(Math.pow(n.pinchEndX1-n.pinchEndX0,2)+Math.pow(n.pinchEndY1-n.pinchEndY0,2)),n.zoomPercentage=n.pinchDeltaEnd/n.pinchDeltaStart,n.targetImageWidth=Math.round(n.imageWidthStart*n.zoomPercentage),n.targetImageHeight=Math.round(n.imageHeightStart*n.zoomPercentage),n.pinchEndX=(n.pinchEndX0+n.pinchEndX1)/2,n.pinchEndY=(n.pinchEndY0+n.pinchEndY1)/2,n.lastPinchEndX0=n.pinchEndX0,n.lastPinchEndY0=n.pinchEndY0,n.lastPinchEndX1=n.pinchEndX1,n.lastPinchEndY1=n.pinchEndY1));n.mouseX=n.touches[0].pageX;n.mouseY=n.touches[0].pageY}function yt(n,t){if(n.action="",n.lastPinchEndX0=n.pinchEndX0=n.pinchStartX0=0,n.lastPinchEndY0=n.pinchEndY0=n.pinchStartY0=0,n.lastPinchEndX1=n.pinchEndX1=n.pinchStartX1=0,n.lastPinchEndY1=n.pinchEndY1=n.pinchStartY1=0,n.pinchStartX=n.pinchEndX=0,n.pinchStartY=n.pinchEndX=0,w(n),t.pointerId)for(var r in n.touches)n.touches[r].identifier===t.pointerId&&n.touches.splice(r,1);i.off(".zoomer");n.touchEventsBound=!1}function b(n){return n.tiled=!1,n.gallery=!1,typeof n.source=="string"?n.images=[n.source]:typeof n.source[0]=="string"?(n.images=n.source,n.images.length>1&&(n.gallery=!0)):(n.tiledThumbnail=n.source.thumbnail,n.images=[n.source.tiles],n.tiled=!0),n}function pt(){f||(f=!0,k())}function wt(){f=!1}function k(){f&&(t.requestAnimationFrame(k),rt())}function o(n,t){var i={};return i["-webkit-"+n]=t,i["-moz-"+n]=t,i["-ms-"+n]=t,i["-o-"+n]=t,i[n]=t,i}function bt(){var n=document.createElement("p"),i,u={webkitTransform:"-webkit-transform",OTransform:"-o-transform",msTransform:"-ms-transform",MozTransform:"-moz-transform",transform:"transform"},r;document.body.insertBefore(n,null);for(r in u)n.style[r]!==undefined&&(n.style[r]="translate3d(1px,1px,1px)",i=t.getComputedStyle(n).getPropertyValue(u[r]));return document.body.removeChild(n),i!==undefined&&i.length>0&&i!=="none"}var i=n(t),r,f=!1,s=!1,h={callback:n.noop,controls:{position:"bottom",zoomIn:null,zoomOut:null,next:null,previous:null},customClass:"",enertia:.2,increment:.01,marginMin:30,marginMax:100,retina:!1,source:null},d={images:[],aspect:"",action:"",lastAction:"",keyDownTime:0,marginReal:0,originalDOM:"",gallery:!1,index:0,$tiles:null,tiled:!1,tilesTotal:0,tilesLoaded:0,tiledColumns:0,tiledRows:0,tiledHeight:0,tiledWidth:0,tiledThumbnail:null,centerLeft:0,centerTop:0,frameHeight:0,frameWidth:0,naturalHeight:0,naturalWidth:0,imageRatioWide:0,imageRatioTall:0,minHeight:null,minWidth:null,maxHeight:0,maxWidth:0,boundsTop:0,boundsBottom:0,boundsLeft:0,boundsRight:0,imageWidth:0,imageHeight:0,imageLeft:0,imageTop:0,targetImageWidth:0,targetImageHeight:0,targetImageLeft:0,targetImageTop:0,oldImageWidth:0,oldImageHeight:0,positionerLeft:0,positionerTop:0,targetPositionerLeft:0,targetPositionerTop:0,zoomPositionLeft:0,zoomPositionTop:0,offset:null,touches:[],zoomPercentage:1,pinchStartX0:0,pinchStartX1:0,pinchStartY0:0,pinchStartY1:0,pinchEndX0:0,pinchEndX1:0,pinchEndY0:0,pinchEndY1:0,lastPinchEndX0:0,lastPinchEndY0:0,lastPinchEndX1:0,lastPinchEndY1:0,pinchDeltaStart:0,pinchDeltaEnd:0},u={defaults:function(t){return h=n.extend(h,t||{}),typeof this=="object"?n(this):!0},destroy:function(){var t=n(this).each(function(t,r){var u=n(r).data("zoomer");u&&(i.off(".zoomer"),u.$holder.off(".zoomer"),u.$zoomer.off(".zoomer"),u.controls.$zoomIn.off(".zoomer"),u.controls.$zoomOut.off(".zoomer"),u.controls.$next.off(".zoomer"),u.controls.$previous.off(".zoomer"),u.$target.removeClass("zoomer-element").data("zoomer",null).empty().append(u.originalDOM))});return r=n(".zoomer-element"),r.length<1&&wt(),t},load:function(t){return n(this).each(function(i,r){var u=n(r).data("zoomer");u&&(u.source=t,u.index=0,u=b(u),e(u))})},pan:function(t,i){return n(this).each(function(r,u){var f=n(u).data("zoomer");f&&(t/=100,i/=100,f.targetPositionerLeft=Math.round(f.centerLeft-f.targetImageLeft-f.targetImageWidth*t),f.targetPositionerTop=Math.round(f.centerTop-f.targetImageTop-f.targetImageHeight*i))})},resize:function(){return n(this).each(function(t,i){var r=n(i).data("zoomer");r&&(r.frameWidth=r.$target.outerWidth(),r.frameHeight=r.$target.outerHeight(),r.centerLeft=Math.round(r.frameWidth*.5),r.centerTop=Math.round(r.frameHeight*.5),r.minHeight=r.naturalHeight,r.minWidth=r.naturalWidth,(r.naturalHeight>r.frameHeight-r.marginReal||r.naturalWidth>r.frameWidth-r.marginReal)&&(r=y(r)))})},unload:function(){return n(this).each(function(){var t=n(this).data("zoomer");t&&typeof t.$image!="undefined"&&t.$image.remove()})}};n.fn.zoomer=function(n){return u[n]?u[n].apply(this,Array.prototype.slice.call(arguments,1)):typeof n=="object"||!n?g.apply(this,arguments):this};n.zoomer=function(n){n==="defaults"&&u.defaults.apply(this,Array.prototype.slice.call(arguments,1))}})(jQuery,window);