jquery.fs.zoomer.min.js

/*!
 * Zoomer [Formstone Library]
 * Includes Request Animation Frame Polyfill 
 * @author Ben Plum
 * @version 0.3.3
 *
 * Copyright © 2013 Ben Plum <mr@benplum.com>
 * Released under the MIT License <http://www.opensource.org/licenses/mit-license.php>
 */
 
if(jQuery)(function(d){function w(a){a=d.extend({},l,x,a);for(var b=d(this),c=0,e=b.length;c<e;c++)y.apply(b.eq(c),[d.extend({},a)]);f=d(".zoomer-element");g||(g=!0,p());return b}function y(a){a.$target=d(this);a.marginReal=2*a.marginMin;a.originalDOM=a.$target.html();0<a.$target.find("img").length&&(a.source=[],a.$target.find("img").each(function(){a.source.push(d(this).attr("src"))}),a.$target.empty());a=q(a);var b='<div class="zoomer '+a.customClass+'">',b=b+'<div class="zoomer-positioner"><div class="zoomer-holder">', b=b+"</div>",b=b+"</div>",b=b+"</div>";a.$zoomer=d(b);a.$target.addClass("zoomer-element").html(a.$zoomer);a.controls.zoomIn||a.controls.zoomOut||a.controls.next||a.controls.previous?(a.controls.$zoomIn=d(a.controls.zoomIn),a.controls.$zoomOut=d(a.controls.zoomOut),a.controls.$next=d(a.controls.next),a.controls.$previous=d(a.controls.previous)):(b='<div class="zoomer-controls zoomer-controls-'+a.controls.position+'">',b+='<span class="zoomer-previous">&lsaquo;</span>',b+='<span class="zoomer-zoom-out">-</span>', b+='<span class="zoomer-zoom-in">+</span>',b+='<span class="zoomer-next">&rsaquo;</span>',b+="</div>",a.$zoomer.append(b),a.controls.$default=a.$zoomer.find(".zoomer-controls"),a.controls.$zoomIn=a.$zoomer.find(".zoomer-zoom-in"),a.controls.$zoomOut=a.$zoomer.find(".zoomer-zoom-out"),a.controls.$next=a.$zoomer.find(".zoomer-next"),a.controls.$previous=a.$zoomer.find(".zoomer-previous"));a.$positioner=a.$zoomer.find(".zoomer-positioner");a.$holder=a.$zoomer.find(".zoomer-holder");a.controls.$zoomIn.on("touchstart.zoomer mousedown.zoomer", a,z).on("touchend.zoomer mouseup.zoomer",a,r);a.controls.$zoomOut.on("touchstart.zoomer mousedown.zoomer",a,A).on("touchend.zoomer mouseup.zoomer",a,r);a.controls.$next.on("click.zoomer",a,B);a.controls.$previous.on("click.zoomer",a,C);a.$zoomer.on("mousedown.zoomer",a,D).on("touchstart.zoomer MSPointerDown.zoomer",":not(.zoomer-controls)",a,m);a.$target.data("zoomer",a);h.resize.apply(a.$target);0<a.images.length&&k.apply(a.$target,[a])}function k(a){a.gallery?a.$zoomer.addClass("zoomer-gallery"): a.$zoomer.removeClass("zoomer-gallery");"undefined"!=typeof a.$image?a.$holder.animate({opacity:0},300,function(){h.unload.apply(a.$target);s.apply(a.$target,[a,a.images[a.index]])}):s.apply(a.$target,[a,a.images[a.index]])}function s(a,b){a.loading=!0;if(a.tiled){a.tilesTotal=0;a.tilesLoaded=0;var c='<div class="zoomer-tiles">',e;for(e in a.images[0])for(var f in a.images[0][e])c+='<img class="zoomer-image zoomer-tile" src="'+a.images[0][e][f]+'" data-zoomer-tile="'+e+"-"+f+'" />',a.tilesTotal++; a.$image=d(c+"</div>");a.$tiles=a.$image.find("img");a.$tiles.each(function(b,c){var e=d(c);e.one("load",a,E);e[0].complete&&e.trigger("load")})}else a.$image=d('<img class="zoomer-image" />'),a.$image.one("load.zoomer",a,t).attr("src",b),a.$image[0].complete&&a.$image.trigger("load")}function E(a){a=a.data;a.tilesLoaded++;a.tilesLoaded==a.tilesTotal&&(a.tiledRows=a.images[0].length,a.tiledColumns=a.images[0][0].length,a.tiledHeight=a.$tiles.eq(0)[0].naturalHeight*a.tiledRows,a.tiledWidth=a.$tiles.eq(0)[0].naturalWidth* a.tiledColumns,t({data:a}))}function t(a){var b=a.data;b.tiled?(b.naturalHeight=b.tiledHeight,b.naturalWidth=b.tiledWidth):(b.naturalHeight=b.$image[0].naturalHeight,b.naturalWidth=b.$image[0].naturalWidth);b.retina&&(b.naturalHeight/=2,b.naturalWidth/=2);b.targetImageHeight=b.naturalHeight;b.targetImageWidth=b.naturalWidth;b.maxHeight=b.naturalHeight;b.maxWidth=b.naturalWidth;b.imageRatioWide=b.naturalWidth/b.naturalHeight;b.imageRatioTall=b.naturalHeight/b.naturalWidth;if(b.naturalHeight>b.frameHeight- b.marginReal||b.naturalWidth>b.frameWidth-b.marginReal)b=u(b),b.targetImageHeight=b.minHeight,b.targetImageWidth=b.minWidth;b.positionerLeft=b.targetPositionerLeft=b.centerLeft;b.positionerTop=b.targetPositionerTop=b.centerTop;b.imageLeft=b.targetImageLeft=Math.round(-b.targetImageWidth/2);b.imageTop=b.targetImageTop=Math.round(-b.targetImageHeight/2);b.imageHeight=b.targetImageHeight;b.imageWidth=b.targetImageWidth;b.$positioner.css({left:b.positionerLeft,top:b.positionerTop});b.$holder.css({left:b.imageLeft, top:b.imageTop,height:b.imageHeight,width:b.imageWidth}).append(b.$image);b.tiled&&(b.$holder.css({background:"url("+b.tiledThumbnail+") no-repeat left top",backgroundSize:"100% 100%"}),b.tileHeightPercentage=100/b.tiledRows,b.tileWidthPercentage=100/b.tiledColumns,b.$tiles.css({height:b.tileHeightPercentage+"%",width:b.tileWidthPercentage+"%"}),b.$tiles.each(function(a,e){var f=d(e),g=f.data("zoomer-tile").split("-");f.css({left:b.tileWidthPercentage*parseInt(g[1],10)+"%",top:b.tileHeightPercentage* parseInt(g[0],10)+"%"})}));b.$holder.animate({opacity:1},300);b.loading=!1}function u(a){a.naturalHeight>a.naturalWidth?(a.aspect="tall",a.minHeight=Math.round(a.frameHeight-a.marginReal),a.minWidth=Math.round(a.minHeight/a.imageRatioTall),a.minWidth>a.frameWidth-a.marginReal&&(a.minWidth=Math.round(a.frameWidth-a.marginReal),a.minHeight=Math.round(a.minWidth/a.imageRatioWide))):(a.aspect="wide",a.minWidth=Math.round(a.frameWidth-a.marginReal),a.minHeight=Math.round(a.minWidth/a.imageRatioWide),a.minHeight> a.frameHeight-a.marginReal&&(a.minHeight=Math.round(a.frameHeight-a.marginReal),a.minWidth=Math.round(a.minHeight/a.imageRatioTall)));return a}function B(a){a=a.data;!a.loading&&a.index+1<a.images.length&&(a.index++,k.apply(a.$target,[a]))}function C(a){a=a.data;!a.loading&&0<=a.index-1&&(a.index--,k.apply(a.$target,[a]))}function z(a){a.preventDefault();a.stopPropagation();a=a.data;a=n(a);a.keyDownTime=1;a.action="zoom_in"}function A(a){a.preventDefault();a.stopPropagation();a=a.data;a=n(a);a.keyDownTime= 1;a.action="zoom_out"}function r(a){a.preventDefault();a.stopPropagation();a=a.data;a=v(a);a.keyDownTime=0;a.action=""}function n(a,b,c){b=b||0.5*a.imageWidth;c=c||0.5*a.imageHeight;a.zoomPositionLeft=(b-(a.positionerLeft-a.centerLeft))/a.imageWidth;a.zoomPositionTop=(c-(a.positionerTop-a.centerTop))/a.imageHeight;return a}function v(a){a.zoomPositionTop=0;a.zoomPositionLeft=0;return a}function D(a){a.preventDefault&&(a.preventDefault(),a.stopPropagation());var b=a.data;b.action="drag";b.mouseX=a.pageX; b.mouseY=a.pageY;b.targetPositionerLeft=b.positionerLeft;b.targetPositionerTop=b.positionerTop;d(window).on("mousemove.zoomer",b,F).on("mouseup.zoomer",b,G)}function F(a){a.preventDefault&&(a.preventDefault(),a.stopPropagation());var b=a.data;a.pageX&&a.pageY&&(b.targetPositionerLeft-=Math.round(b.mouseX-a.pageX),b.targetPositionerTop-=Math.round(b.mouseY-a.pageY),b.mouseX=a.pageX,b.mouseY=a.pageY)}function G(a){a.preventDefault&&(a.preventDefault(),a.stopPropagation());a.data.action="";d(window).off("mousemove.zoomer mouseup.zoomer")} function m(a){if(!(0<d(a.target).parent(".zoomer-controls").length)){a.preventManipulation&&a.preventManipulation();a.preventDefault();a.stopPropagation();var b=a.data;a=a.originalEvent;if(a.type.match(/(up|end)$/i)){b.action="";b.lastPinchEndX0=b.pinchEndX0=b.pinchStartX0=0;b.lastPinchEndY0=b.pinchEndY0=b.pinchStartY0=0;b.lastPinchEndX1=b.pinchEndX1=b.pinchStartX1=0;b.lastPinchEndY1=b.pinchEndY1=b.pinchStartY1=0;b.pinchStartX=b.pinchEndX=0;b.pinchStartY=b.pinchEndX=0;v(b);if(a.pointerId)for(var c in b.touches)b.touches[c].identifier== a.pointerId&&b.touches.splice(c,1);1>b.touches.length?(d(window).off(".zoomer"),b.touchEventsBound=!1):(b.mouseX=b.touches[0].pageX,b.mouseY=b.touches[0].pageY)}else{if(a.pointerId){c=!1;for(var e in b.touches)b.touches[e].identifier==a.pointerId&&(c=!0,b.touches[e].pageX=a.clientX,b.touches[e].pageY=a.clientY);c||b.touches.push({identifier:a.pointerId,pageX:a.clientX,pageY:a.clientY})}else b.touches=a.touches;a.type.match(/(down|start)$/i)?(b.touchEventsBound||(b.touchEventsBound=!0,d(window).on("touchmove.zoomer MSPointerMove.zoomer", b,m).on("touchend.zoomer MSPointerUp.zoomer",b,m)),b.zoomPercentage=1,2<=b.touches.length&&(b.offset=b.$zoomer.offset(),b.pinchStartX0=b.touches[0].pageX-b.offset.left,b.pinchStartY0=b.touches[0].pageY-b.offset.top,b.pinchStartX1=b.touches[1].pageX-b.offset.left,b.pinchStartY1=b.touches[1].pageY-b.offset.top,b.pinchStartX=(b.pinchStartX0+b.pinchStartX1)/2,b.pinchStartY=(b.pinchStartY0+b.pinchStartY1)/2,b.imageWidthStart=b.imageWidth,b.imageHeightStart=b.imageHeight,n(b),b.pinchDeltaStart=Math.sqrt(Math.pow(b.pinchStartX1- b.pinchStartX0,2)+Math.pow(b.pinchStartY1-b.pinchStartY0,2))),b.mouseX=b.touches[0].pageX,b.mouseY=b.touches[0].pageY):a.type.match(/move$/i)&&(1==b.touches.length?(b.action="drag",b.targetPositionerLeft-=b.mouseX-b.touches[0].pageX,b.targetPositionerTop-=b.mouseY-b.touches[0].pageY):2<=b.touches.length&&(b.action="pinch",b.pinchEndX0=b.touches[0].pageX-b.offset.left,b.pinchEndY0=b.touches[0].pageY-b.offset.top,b.pinchEndX1=b.touches[1].pageX-b.offset.left,b.pinchEndY1=b.touches[1].pageY-b.offset.top, b.pinchEndX0!=b.lastPinchEndX0||b.pinchEndY0!=b.lastPinchEndY0||b.pinchEndX1!=b.lastPinchEndX1||b.pinchEndY1!=b.lastPinchEndY1)&&(b.pinchDeltaEnd=Math.sqrt(Math.pow(b.pinchEndX1-b.pinchEndX0,2)+Math.pow(b.pinchEndY1-b.pinchEndY0,2)),b.zoomPercentage=b.pinchDeltaEnd/b.pinchDeltaStart,b.targetImageWidth=Math.round(b.imageWidthStart*b.zoomPercentage),b.targetImageHeight=Math.round(b.imageHeightStart*b.zoomPercentage),b.pinchEndX=(b.pinchEndX0+b.pinchEndX1)/2,b.pinchEndY=(b.pinchEndY0+b.pinchEndY1)/2, b.lastPinchEndX0=b.pinchEndX0,b.lastPinchEndY0=b.pinchEndY0,b.lastPinchEndX1=b.pinchEndX1,b.lastPinchEndY1=b.pinchEndY1),b.mouseX=b.touches[0].pageX,b.mouseY=b.touches[0].pageY)}}}function q(a){a.tiled=!1;a.gallery=!1;"string"==typeof a.source?a.images=[a.source]:"string"==typeof a.source[0]?(a.images=a.source,1<a.images.length&&(a.gallery=!0)):(a.tiledThumbnail=a.source.thumbnail,a.images=[a.source.tiles],a.tiled=!0);return a}function p(){if(g){window.requestAnimationFrame(p);for(var a=0,b=f.length;a< b;a++){var c=f.eq(a).data("zoomer");if("object"==typeof c){if("zoom_in"==c.action||"zoom_out"==c.action){c.keyDownTime+=c.increment;var d=("zoom_out"==c.action?-1:1)*Math.round(c.imageWidth*c.keyDownTime-c.imageWidth);"tall"==c.aspect?(c.targetImageHeight+=d,c.targetImageWidth=Math.round(c.targetImageHeight/c.imageRatioTall)):(c.targetImageWidth+=d,c.targetImageHeight=Math.round(c.targetImageWidth/c.imageRatioWide))}"tall"==c.aspect?c.targetImageHeight<c.minHeight?(c.targetImageHeight=c.minHeight, c.targetImageWidth=Math.round(c.targetImageHeight/c.imageRatioTall)):c.targetImageHeight>c.maxHeight&&(c.targetImageHeight=c.maxHeight,c.targetImageWidth=Math.round(c.targetImageHeight/c.imageRatioTall)):c.targetImageWidth<c.minWidth?(c.targetImageWidth=c.minWidth,c.targetImageHeight=Math.round(c.targetImageWidth/c.imageRatioWide)):c.targetImageWidth>c.maxWidth&&(c.targetImageWidth=c.maxWidth,c.targetImageHeight=Math.round(c.targetImageWidth/c.imageRatioWide));c.targetImageLeft=Math.round(0.5*-c.targetImageWidth); c.targetImageTop=Math.round(0.5*-c.targetImageHeight);c.imageWidth+=Math.round((c.targetImageWidth-c.imageWidth)*c.enertia);c.imageHeight+=Math.round((c.targetImageHeight-c.imageHeight)*c.enertia);c.imageLeft+=Math.round((c.targetImageLeft-c.imageLeft)*c.enertia);c.imageTop+=Math.round((c.targetImageTop-c.imageTop)*c.enertia);c.boundsLeft=Math.round(c.frameWidth-0.5*c.targetImageWidth-c.marginMax);c.boundsRight=Math.round(0.5*c.targetImageWidth+c.marginMax);c.boundsTop=Math.round(c.frameHeight-0.5* c.targetImageHeight-c.marginMax);c.boundsBottom=Math.round(0.5*c.targetImageHeight+c.marginMax);c.targetPositionerLeft<c.boundsLeft&&(c.targetPositionerLeft=c.boundsLeft);c.targetPositionerLeft>c.boundsRight&&(c.targetPositionerLeft=c.boundsRight);c.targetPositionerTop<c.boundsTop&&(c.targetPositionerTop=c.boundsTop);c.targetPositionerTop>c.boundsBottom&&(c.targetPositionerTop=c.boundsBottom);0<c.zoomPositionTop&&0<c.zoomPositionLeft&&(c.targetPositionerLeft=c.centerLeft-c.targetImageLeft-c.targetImageWidth* c.zoomPositionLeft,c.targetPositionerTop=c.centerTop-c.targetImageTop-c.targetImageHeight*c.zoomPositionTop);c.targetImageWidth<c.frameWidth&&(c.targetPositionerLeft=c.centerLeft);c.targetImageHeight<c.frameHeight&&(c.targetPositionerTop=c.centerTop);c.positionerLeft+=Math.round((c.targetPositionerLeft-c.positionerLeft)*c.enertia);c.positionerTop+=Math.round((c.targetPositionerTop-c.positionerTop)*c.enertia);c.oldImageWidth=c.imageWidth;c.oldImageHeight=c.imageHeight;c.lastAction=c.action;c.$positioner.css({left:c.positionerLeft, top:c.positionerTop});c.$holder.css({left:c.imageLeft,top:c.imageTop,width:c.imageWidth,height:c.imageHeight});c.callback&&c.callback.apply(c.$zoomer,[(c.imageWidth-c.minWidth)/(c.maxWidth-c.minWidth)])}}}}var l={callback:null,controls:{position:"bottom",zoomIn:null,zoomOut:null,next:null,previous:null},customClass:"",enertia:0.2,increment:0.01,marginMin:30,marginMax:100,retina:!1,source:""},x={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},g=!1,f,h={defaults:function(a){l=d.extend(l,a||{});return d(this)},destroy:function(){var a=d(this).each(function(){var a=d(this).data("zoomer"); d(window).off(".zoomer");a.$holder.off(".zoomer");a.$zoomer.off(".zoomer");a.controls.$zoomIn.off(".zoomer");a.controls.$zoomOut.off(".zoomer");a.controls.$next.off(".zoomer");a.controls.$previous.off(".zoomer");a.$target.removeClass("zoomer-element").data("zoomer",null).empty().append(a.originalDOM)});f=d(".zoomer-element");1>f.length&&(g=!1);return a},load:function(a){return d(this).each(function(){var b=d(this).data("zoomer");b.source=a;b.index=0;b=q(b);k(b)})},pan:function(a,b){return d(this).each(function(){var c= d(this).data("zoomer");"undefined"!=typeof c&&(b/=100,a/=100,c.targetPositionerTop=Math.round(c.centerTop-c.targetImageTop-c.targetImageHeight*b),c.targetPositionerLeft=Math.round(c.centerLeft-c.targetImageLeft-c.targetImageWidth*a))})},resize:function(){return d(this).each(function(){var a=d(this).data("zoomer");"undefined"!=typeof a&&(a.frameWidth=a.$target.outerWidth(),a.frameHeight=a.$target.outerHeight(),a.centerLeft=Math.round(0.5*a.frameWidth),a.centerTop=Math.round(0.5*a.frameHeight),u(a))})}, unload:function(){return d(this).each(function(){var a=d(this).data("zoomer");"undefined"!=typeof a.$image&&a.$image.remove()})}};d.fn.zoomer=function(a){return h[a]?h[a].apply(this,Array.prototype.slice.call(arguments,1)):"object"!==typeof a&&a?this:w.apply(this,arguments)}})(jQuery);