-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathjquery.ctg.imageViewer.min.js
9 lines (9 loc) · 4.56 KB
/
jquery.ctg.imageViewer.min.js
1
2
3
4
5
6
7
8
9
(function(d){d.widget("ctg.imageViewer",{options:{images:[],dimensions:{detail:[500,625],zoom:[1920,2400]},zoomSteps:3,imageUrlFormat:function(){throw"jQuery.ctg.imageViewer: You are required to supply a function for 'imageUrlFormat'";},previewLinkSelector:"a",onImageUpdate:function(){}},_create:function(){this._objects();this._calculateZoomSettings();this._initializeImages();this._resetImageAttributes();this._createBlocker();this._events()},_objects:function(){var a=this.options.elements;this.objects=
{};this.objects.previews=a.previews||d("<div />");this.objects.stage=a.stage||d("<div />");this.objects.zoomIn=a.zoomIn||d("<a />");this.objects.zoomOut=a.zoomOut||d("<a />")},_events:function(){var a=this;this.objects.previews.find(this.options.previewLinkSelector).each(function(b){d(this).click(function(c){c.preventDefault();a.showImage(b)})});this.objects.zoomIn.click(function(b){b.preventDefault();a.zoomIn()});this.objects.zoomOut.click(function(b){b.preventDefault();a.zoomOut()});this.objects.blocker.click(function(b){a.zoomLevel<
a.zoomSettings.length-1?a.zoomIn(b):a.resetZoomLevel()}).mousemove(function(b){a._pan(b)});this.element.hover(function(){a.showZoomImage()},function(){a.hideZoomImage()})},_createBlocker:function(){this.objects.blocker=d("<div />");this.objects.blocker.css({background:"url("+this.images[0].detail+") no-repeat -9999em 0",position:"absolute",top:0,left:0,width:"100%",height:"100%"});this.objects.blocker.appendTo(this.objects.stage)},_initializeImages:function(){var a=this,b=this.options.dimensions;
this.index=0;this.images=[];this.images=d.map(this.options.images,function(c){return{detail:a.options.imageUrlFormat(c,b.detail[0],b.detail[1]),zoom:a.options.imageUrlFormat(c,b.zoom[0],b.zoom[1])}});this.objects.detailImage=this.objects.stage.find("img");this.objects.detailImage.css({position:"absolute",top:0,left:0,width:this.zoomSettings[0].w,height:this.zoomSettings[0].h})},_calculateZoomSettings:function(){var a=this.options.dimensions,b=this.options.zoomSteps,c=this.objects.stage,d;d={w:a.detail[0],
h:a.detail[1]};a={w:a.zoom[0],h:a.zoom[1]};a={w:Math.exp(Math.log(a.w/d.w)/b),h:Math.exp(Math.log(a.h/d.h)/b)};this.offset=c.offset();this.clipper={w:c.width(),h:c.height()};this.zoomSettings=[];for(c=0;c<=b;c++)this.zoomSettings.push({w:Math.round(d.w*Math.pow(a.w,c)),h:Math.round(d.h*Math.pow(a.h,c))})},zoomIn:function(a){this.zoomLevel>=this.zoomSettings.length-1||(this.objects.zoomImage||this._loadZoomImage(),this.zoomLevel++,this._zoomToLevel(a))},zoomOut:function(a){this.zoomLevel<1||(this.zoomLevel--,
this._zoomToLevel(a))},resetZoomLevel:function(a){this.zoomLevel=0;this._zoomToLevel(a)},_zoomToLevel:function(a){var b=this,a=this._calculateOffset(a),c=this.zoomSettings[this.zoomLevel];this.disable();this.objects.zoomImage.show().animate({left:a.x,top:a.y,width:c.w,height:c.h},{duration:400,easing:"easeOutCubic",queue:!1,complete:function(){b.zoomLevel===0&&b.objects.zoomImage&&b.objects.zoomImage.hide();b.enable()}})},_loadZoomImage:function(){var a=this;this.objects.zoomImage=this.objects.detailImage.clone().insertBefore(this.objects.blocker);
d(new Image).bind("load",function(){a.objects.zoomImage.attr("src",this.src)}).attr("src",this.images[this.index].zoom)},_pan:function(a){!this.options.disabled&&this.objects.zoomImage&&(a=this._calculateOffset(a),this.objects.zoomImage.css({left:a.x,top:a.y}))},_calculateOffset:function(a){var b,c,d;c=this.zoomSettings[this.zoomLevel];if(!a)return{x:(c.w-this.clipper.w)/-2,y:(c.h-this.clipper.h)/-2};d=c.w-this.clipper.w;c=c.h-this.clipper.h;a={x:Math.max(a.pageX-this.offset.left,0),y:Math.max(a.pageY-
this.offset.top,0)};b={x:d/this.clipper.w,y:c/this.clipper.h};return{x:Math.max(-a.x*b.x,-d),y:Math.max(-a.y*b.y,-c)}},showImage:function(a){var b=this;if(!(a===this.index||this.options.disabled))this.index=a,this.disable(),d(new Image).bind("load",function(){var c=d(this);c.css({position:"absolute",left:0,top:0,width:b.zoomSettings[0].w,height:b.zoomSettings[0].h,display:"none"}).insertBefore(b.objects.blocker).fadeIn(500,function(){b.objects.detailImage=c;b.objects.detailImage.siblings("img").remove();
b._resetImageAttributes();b.enable();if(b.options.onImageUpdate&&typeof b.options.onImageUpdate==="function")b.options.onImageUpdate(b.images[a],a)})}).attr("src",this.images[a].detail)},_resetImageAttributes:function(){this.zoomLevel=0;this.objects.zoomImage=null},showZoomImage:function(){this.objects.zoomImage&&this.objects.zoomImage.animate({opacity:1},{duration:200,queue:!1})},hideZoomImage:function(){this.objects.zoomImage&&this.objects.zoomImage.animate({opacity:0},{duration:200,queue:!1})}})})(jQuery);