coolzoom/dist/coolzoom.min.js

Coolzoom is a jQuery plugin for displaying enlarged images on webpages. Coolzoom works on desktop, mobiles and tablets.

!function(e){"use strict";e.fn.CoolZoom=function(o){var a,t,i,n,r,s,m,l,d,c,g,p,h,u,f,z,v,I,x,b,y,w,A,M,k,C,E,Z,H,S,W,T,V,R,L,_,U,X;return a="coolzoom",t="coolzoom",i=a+"_pointer",n={onClick:"doubletap click."+a,onMouseEnter:"touchstart mouseenter."+a,onDragStart:"dragstart."+a,onMouseMove:"touchmove mousemove."+a,onMouseUp:"touchend."+a,onMouseLeave:"mouseleave."+a},r={onClick:"tap click."+i,onMouseMove:"touchmove mousemove."+i},s={magnifier:{opacity:.4,backgroundColor:"white",fadeAnimationSpeed:200,borderSize:"2px",position:"-40px",size:"120px"},zoomArea:{width:"200px",height:"200px",animationSpeed:10,fadeAnimationSpeed:0,zIndex:4e3,dataAttribute:"data-zoom-target",defaultPosition:"right",smartPosition:!0,persistentZoom:!1,getTarget:function(e){var o,a;return o=this.zoomArea.dataAttribute,a=e.attr(o)||"popup"}},mainArea:{opacity:1,backgroundColor:"white",filter:"normal"},notificationArea:{position:"bottom"},zoomedImage:{defaultHeight:1200,defaultWidth:1200,multiply:1,zoomMax:10,initialZoomValue:2,zoomIncrease:2,useSourceAsZoom:!1,dataAttribute:"data-hires",getImageURL:function(e){var o,a;return o=this.zoomedImage.dataAttribute,a=e.attr(o)}},text:{maskValue:"%%%",zoomApplied:"New zoom applied x %%%",maxReached:"Max zoom reached x %%%",missingImage:"Zoom unavailable"}},m={},l=function(e){e.preventDefault(),e.pageX||e.pageY?(m.pageX=e.pageX,m.pageY=e.pageY):(m.pageX=e.originalEvent.changedTouches[0].pageX,m.pageY=e.originalEvent.changedTouches[0].pageY)},d=function(o){var a=e(this);return a.data(t+".settings",o),a},c=function(){var o,a=e(this);return o=a.data(t+".settings")},g=function(){var o,a=e(this);return o=a.data(t+".magnifying-glass")},p=function(){var o,a=e(this);return o=a.data(t+".popup_area")},h=function(){var o,a=e(this);return o=a.data(t+".inner-popup")},u=function(){var o,a=e(this);return o=a.data(t+".image-popup")},f=function(){var o,a=e(this);return o=a.data(t+".notification")},z=function(){var o,a,t,i=e(this);return a=c.call(i),t=a.magnifier.fadeAnimationSpeed,a.currentEvent.mouseIn&&(o=g.call(i))?(o.show().stop().animate({opacity:a.magnifier.opacity},t),o):void 0},v=function(o,a){var t,i,n,r,s,m,l,d,c,p,u=e(this);t=g.call(u),i=h.call(u),c=Math.abs(i[0].scrollHeight),p=Math.abs(i[0].scrollWidth),n=t.position().left,r=t.position().top,l=100*n/u.width(),d=100*r/u.height(),s=l*p/100,m=d*c/100,t.css({left:n+"px",top:r+"px"}),o?(i.scrollLeft(s),i.scrollTop(m)):i.stop().animate({scrollLeft:s,scrollTop:m},a)},I=function(o){var a,t,i,n,r=e(this);n=c.call(r),n.currentEvent.mouseIn&&(a=g.call(r),a&&(t=Math.abs(m.pageX-r.offset().left),i=Math.abs(m.pageY-r.offset().top),t-=a.outerWidth()/2,i-=a.outerHeight()/2,t=t>=0?t:0,i=i>=0?i:0,t=t-r.width()+a.width()<=0?t:r.width()-a.width(),i=i-r.height()+a.height()<=0?i:r.height()-a.height(),o?(a.css({left:t+"px",top:i+"px"}),z.call(r),v.call(r,o)):a.stop().animate({left:t+"px",top:i+"px"},function(){n.currentEvent.magnifyingGlassReady=!0,n.currentEvent.mouseIn&&(z.call(r),v.call(r,o))})))},x=function(){var o,a,i=e(this);a=c.call(i),o=i.data(t+".magnifying-glass"),o&&o.length||(o=e("<div />").addClass(t+"-magnifying-glass"),o.css({position:"absolute",pointerEvents:"none",backgroundColor:a.magnifier.backgroundColor,opacity:0}),o.show().css({left:0,top:0}),i.append(o).data(t+".magnifying-glass",o))},b=function(o){var a,t,i,n,r,s,m,l,d=e(this);return m=c.call(d),m.currentEvent.mouseIn?(a=g.call(d),t=p.call(d),i=h.call(d),n=u.call(d),t.innerWidth()>=n.width()&&i.width(n.width()),t.innerHeight()>=n.height()&&i.height(n.height()),r=i.innerWidth()/n.width()*d.width(),s=i.innerHeight()/n.height()*d.height(),r>=d.width()&&s>=d.height()&&(l=m.zoomedImage.initialZoomValue+m.zoomedImage.zoomIncrease,r=Math.ceil(r/l),s=Math.ceil(s/l),n.width(n.width()*l),n.height(n.height()*l)),o?(a.width(r),a.height(s),I.call(d,o)):a.animate({width:r+"px",height:s+"px"},200,function(){m.currentEvent.mouseIn&&I.call(d,o)}),a):void 0},y=function(o){var a,t=e(this);a=c.call(t),a.currentEvent.mouseIn&&b.call(t,o)},w=function(){var o,a,i,n=e(this);return a=c.call(n),i=a.magnifier.fadeAnimationSpeed,o=n.data(t+".magnifying-glass"),a.currentEvent.magnifyingGlassReady=!1,o?void o.stop().animate({opacity:0},i,function(){e(this).remove()}):null},A=function(){var o=e(this);I.call(o,v.bind(o,!0))},M=function(o){var a,i,n,r,s=e(this);return r=c.call(s),o||(o=r.zoomedImage.initialZoomValue*r.zoomedImage.multiply,o=Math.round(2*o)/2,o>=r.zoomedImage.zoomMax?(r.zoomedImage.multiplyMax=r.zoomedImage.multiply=r.zoomedImage.zoomMax/r.zoomedImage.initialZoomValue,o=r.text.maxReached.replace("%",r.zoomedImage.zoomMax)):o="zoom x "+o),i=p.call(s),n=e("<div >&nbsp;</div>").addClass(t+"-notification-background").css(r.notificationArea.position,0).css({position:"absolute",width:"100%",zIndex:r.zoomArea.zIndex+2,opacity:.2}).animate({opacity:.5}).delay(1e3).animate({right:"-100%",opacity:0}),a=e("<div />").addClass(t+"-notification").css(r.notificationArea.position,0).css({position:"absolute",right:"-100%",width:"auto",height:"auto",lineHeight:1,zIndex:r.zoomArea.zIndex+3}).animate({opacity:.65,right:"1rem"}).text(o).delay(1e3).animate({opacity:0},function(){e(this).remove()}),e("."+t+"-notification",i).remove(),e("."+t+"-notification-background",i).remove(),a.prependTo(i),n.prependTo(i),a},k=function(){var o,a,i,n,r,s,m,l,d=e(this);switch(r=c.call(d),s=t+"-onmouseenter-popup",r.zoomedImage.realHeight=r.zoomedImage.defaultHeight,r.zoomedImage.realWidth=r.zoomedImage.defaultWidth,o="fixed"===d.css("position")?"fixed":"absolute",e("."+t+"-zoom-area").remove(),r.zoomArea.target){case"self":a=d.clone().off(),a.css({position:o,overflow:"hidden",zIndex:r.zoomArea.zIndex+1,pointerEvents:"none",border:"none"}).removeClass(t+"-hover-container").addClass(t+"-zoom-area").appendTo("body").css({left:d.offset().left+"px",top:d.offset().top+"px"});break;case"magnifier":a=g.call(d).addClass(t+"-zoom-area").css({opacity:1}).show();break;case"popup":a=e("<div />").addClass(t+"-zoom-area").css({position:"absolute",marginTop:0,overflow:"hidden",zIndex:r.zoomArea.zIndex}).appendTo("body").css({left:d.offset().left+d.width()+"px",top:d.offset().top+"px"});break;default:a=e(r.zoomArea.target).css({opacity:1}).show()}switch(d.data(t+".popup_area",a),n=a.offset().top-d.offset().top,a.css({top:d.offset().top-n+"px"}).removeClass(t+"-onhover-popup onclick-popup-"+t).addClass(s).show(),i=e("<div />").addClass("coolzone-inner-popup").css({position:"relative",overflow:"hidden",boxSizing:"border-box"}),r.zoomArea.target){case"magnifier":r.magnifier.innerZoom=!0,a.css({opacity:0}).show(),i=e("<div />").css({position:"relative",overflow:"hidden",boxSizing:"border-box"});break;case"self":a.css({opacity:1}).show(),i=e("<div />").css({position:"relative",overflow:"hidden",boxSizing:"border-box",height:d.outerHeight(),width:d.outerWidth()});break;case"popup":a.css({opacity:0}).hide(),i.css({height:r.zoomArea.height,width:r.zoomArea.width});break;default:i=e("<div />").css({position:"relative",overflow:"hidden",boxSizing:"border-box",height:a.outerHeight(),width:a.outerWidth()})}return"round"===r.magnifier.shape?(a.css({borderRadius:"100%"}),i.addClass(t+"-round").css({borderRadius:"100%"})):i.addClass(t+"-square"),r.magnifier.innerZoom&&(a.css({border:"none",background:"transparent",boxShadow:"none"}),i.addClass(t+"-inner-magnifying-glass").css({width:r.magnifier.size,height:r.magnifier.size,marginLeft:r.magnifier.position,marginTop:r.magnifier.position})),r.mainArea.backgroundColor&&d.css({backgroundColor:r.mainArea.backgroundColor}),m=!1,1!==r.mainArea.opacity&&(m=!0),"white"!==r.mainArea.backgroundColor&&(m=!0),"normal"!==r.mainArea.filter&&(m=!0),m&&(d.css({"background-blend-mode":r.mainArea.filter}),l=d.data("main_image"),l.css({opacity:0}),d.css({"background-image":"url("+l.prop("src")+")","background-size":l.width()+"px "+l.height()+"px",opacity:r.mainArea.opacity})),i.prependTo(a.empty()),d.data(t+".inner-popup",i),a},H=function(){var o,a=e(this);o=a.data("main_image"),o&&o.unwrap()},C=function(o){var a,t,i,n,r=e(this);i=c.call(r),a=p.call(r),t=i.zoomArea.fadeAnimationSpeed,o=o||0,n=r.data("main_image"),n.css({opacity:X}),setTimeout(H.bind(r),o+200),a.delay(o).fadeOut(t,H.bind(r))},E=function(){var o,a,i,r,s,m,l,d,g,p=e(this);l=c.call(p),l&&(o=p.data(t+".popup_area"),s=p.data(t+".inner-popup"),a=e("img",p),l.zoomedImage.getImageURL&&(i=l.zoomedImage.getImageURL.call(l,a)),i?r=e("<img />").prop("src",i):(r=a.clone(),i=r.prop("src")),r.height(l.zoomedImage.realHeight*l.zoomedImage.multiply).width(l.zoomedImage.realWidth*l.zoomedImage.multiply),r.hide().prependTo(s).fadeIn("slow"),p.data(t+".image-popup",r),m=new Image,d=function(e,o){var a,t;t=c.call(e),o.hide(),t.zoomedImage.useSourceAsZoom||(a=t.text.missingImage.replace("%",this.src),a.length&&M.call(e,a),t.noZoomable=!0,C.call(e,2e3))},g=function(e){var a;a=c.call(e),a&&a.currentEvent.mouseIn&&(a.zoomedImage.realHeight=this.height,a.zoomedImage.realWidth=this.width,r.height(a.zoomedImage.realHeight).width(a.zoomedImage.realWidth).css({maxWidth:"none",maxHeight:"none"}),a.zoomedImage.initialZoomValue=a.zoomedImage.realWidth/o.width(),a.perZoomIncrease||(a.zoomedImage.perZoomIncrease=a.zoomedImage.zoomIncrease/a.zoomedImage.initialZoomValue),y.call(e,!0),e.on(n.onMouseMove,R.bind(e)).on(n.onClick,L.bind(e)))},m.onerror=d.bind(m,p,r,i),m.onload=g.bind(m,p,i),m.src=i)},Z=function(){var o,a,t,i,n,r,s,m,l,d,g,h,u,f,z=e(this);switch(f=c.call(z),d=f.zoomArea.animationSpeed,g=f.zoomArea.fadeAnimationSpeed,o=p.call(z),f.zoomArea.target){case"popup":s=z.offset().top,r=z.offset().left,a=o.width(),t=o.height(),i=z.width(),n=z.height(),"right"===f.zoomArea.defaultPosition?o.show().css({left:r,top:s,pointerEvents:"none"}):o.show().css({left:r+i+a,top:s,pointerEvents:"none"}),h=z.offset().top-o.offset().top,u=z.offset().left-o.offset().left,l=s+h,m=r+i+u,o.hide().width(a/4).height(a/4).css({opacity:0,top:l+n/4+"px",left:m-i/2+"px"}).show().animate({opacity:.8},g).animate({top:l+"px",left:m+"px"},d,function(){e(this).animate({width:a+"px"},d,function(){e(this).animate({height:t+"px"},d,function(){e(this).animate({opacity:1},g,function(){E.call(z)})})})});break;default:o.css({opacity:0}).animate({opacity:1},g),E.call(z)}},S=function(){var o,a,t,i,n,r,s=e(this);return r=c.call(s),o=p.call(s),a=e("img",o),a.height(r.zoomedImage.lastHeight||r.zoomedImage.realHeight).width(r.zoomedImage.lastWidth||r.zoomedImage.realWidth).css({maxWidth:"none",maxHeight:"none"}),i=r.zoomedImage.realHeight*r.zoomedImage.multiply,t=r.zoomedImage.realWidth*r.zoomedImage.multiply,r.zoomedImage.lastHeight=i,r.zoomedImage.lastWidth=t,a.animate({height:i,width:t},function(){y.call(s,!1),n=Math.round(r.zoomedImage.initialZoomValue*r.zoomedImage.multiply*2)/2,M.call(s,r.text.zoomApplied.replace(r.text.maskValue,n))}),o},W=function(){var a,i,n,r=e(this);switch(X=r.css("opacity"),a=r.closest("."+t+"-hover-container"),a.length&&r.unwrap(),a=r.wrap(e("<div />")).parent(),a.css({lineHeight:0}).addClass(t+"-hover-container"),n=e.extend(!0,s,o),n.zoomArea.target&&n.zoomArea.dataAttribute&&r.attr(n.zoomArea.dataAttribute,n.zoomArea.target),n.zoomArea&&n.zoomArea.getTarget&&(n.zoomArea.target=n.zoomArea.getTarget.call(n,r)),i=a,n.zoomArea.target){case"magnifier":n.magnifier.opacity=1}return d.call(i,n),n.currentEvent={},i.css("cursor")||i.css({cssimage:"zoom-in"}),n.magnifier.cssimage&&i.css({cursor:n.magnifier.cssimage}),i.css({position:"relative",boxSizing:"border-box",display:"inline-block"}),i.data(t+".hover_area",i),i.data("main_image",r),i},T=function(){var o,a,t=e(this);switch(U=!1,o=c.call(t),o.currentEvent.magnifyingGlassReady=!1,o.currentEvent.mouseIn=!1,t.off(n.onMouseUp).off(n.onMouseLeave).off(n.onMouseMove).off(n.onClick),w.call(t),o.zoomArea.target){case"magnifier":C.call(t);break;case"popup":case"self":C.call(t);break;default:o.zoomArea.persistentZoom||(a=h.call(t),a.remove())}},V=function(o){var a,t,i;a=e(this),U||(U=!0,t=W.call(a),t.data("mouse_in",!0),i=c.call(t),l(o),i.currentEvent.type="mouseenter",i.currentEvent.magnifyingGlassReady=!1,i.currentEvent.mouseIn=!0,i.zoomedImage.multiply=i.zoomedImage.initialZoomValue,x.call(t),k.call(t),Z.call(t),t.off(n.onMouseLeave).off(n.onMouseUp).on(n.onMouseLeave,T.bind(t)).on(n.onMouseUp,T.bind(t)))},R=function(o){var a=e(this);o.preventDefault(),l(o),A.call(a)},L=function(o){var a,t=e(this);if(a=c.call(t),o.preventDefault(),l(o),a.click)try{if(!a.click())return}catch(i){return}return a.currentEvent.type="click",a.zoomedImage.multiply>=a.zoomedImage.multiplyMax?void M.call(t,a.text.maxReached.replace(a.text.maskValue,a.zoomedImage.zoomMax)):(a.zoomedImage.multiply+=a.zoomedImage.perZoomIncrease,a.zoomedImage.multiply>=a.zoomedImage.multiplyMax?void M.call(t,a.text.maxReached.replace(a.text.maskValue,a.zoomedImage.zoomMax)):(clearTimeout(a.zoomedImage.timer),void(a.zoomedImage.timer=setTimeout(function(){a.zoomedImage.initialZoomValue*a.zoomedImage.multiply>=a.zoomedImage.zoomMax&&(a.zoomedImage.multiplyMax=a.zoomedImage.multiply=a.zoomedImage.zoomMax/a.zoomedImage.initialZoomValue),S.call(t)},200))))},_=function(){var o=e(this);o.off(n.onMouseEnter).off(r.onMouseMove).off(r.onClick).off(r.onClick).off(n.onDragStart)},this.each(function(){var o,a=e(this);o="img"===a.prop("tagName").toLowerCase()?a:e("img",a),o.each(function(){o.on(n.onMouseEnter,V.bind(o))})})}}(jQuery);