jquery.fs.zoomer.min.js

/* 
 * Zoomer v3.0.11 - 2014-07-08 
 * A jQuery plugin for smooth image exploration. Part of the formstone library. 
 * http://formstone.it/components/zoomer/ 
 * 
 * Copyright 2014 Ben Plum; MIT Licensed 
 */ 

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