Fix for attaching to hidden images

olachan · Dec 11, 2011 · 6150bba · 6150bba
1 parent 478efed
commit 6150bba
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/js/jquery.Jcrop.js b/js/jquery.Jcrop.js
@@ -171,6 +171,11 @@
         if ((ord === 'move') && !options.allowMove) {
           return false;
         }
+
+        // Fix position of crop area when dragged the very first time.
+        // Necessary when crop image is in a hidden element when page is loaded.
+        docOffset = getPos($img);
+
         btndown = true;
         startDragMode(ord, mouseAbs(e));
         e.stopPropagation();
@@ -291,6 +296,21 @@
     };
 
     var $origimg = $(obj);
+
+    // Fix size of crop image.
+    // Necessary when crop image is within a hidden element when page is loaded.
+    if ($origimg[0].width != 0 && $origimg[0].height != 0) {
+      // Obtain dimensions from contained img element.
+      $origimg.width($origimg[0].width);
+      $origimg.height($origimg[0].height);
+    } else {
+      // Obtain dimensions from temporary image in case the original is not loaded yet (e.g. IE 7.0). 
+      var tempImage = new Image();
+      tempImage.src = $origimg[0].src;
+      $origimg.width(tempImage.width);
+      $origimg.height(tempImage.height);
+    } 
+
     var $img = $origimg.clone().removeAttr('id').css(img_css).show();
 
     $img.width($origimg.width());

diff --git a/js/jquery.Jcrop.min.js b/js/jquery.Jcrop.min.js
@@ -1,5 +1,5 @@
 /**
- * jquery.Jcrop.min.js v0.9.9 {{{ (build:20111115)
+ * jquery.Jcrop.min.js v0.9.9 {{{ (build:20111210)
  * jQuery Image Cropping Plugin - released under MIT License
  * Copyright (c) 2008-2011 Tapmodo Interactive LLC
  * https://github.com/tapmodo/Jcrop
@@ -27,7 +27,7 @@ function oppLockCorner(ord)
 function createDragger(ord)
 {return function(e){if(options.disabled){return false;}
 if((ord==='move')&&!options.allowMove){return false;}
-btndown=true;startDragMode(ord,mouseAbs(e));e.stopPropagation();e.preventDefault();return false;};}
+docOffset=getPos($img);btndown=true;startDragMode(ord,mouseAbs(e));e.stopPropagation();e.preventDefault();return false;};}
 function presize($obj,w,h)
 {var nw=$obj.width(),nh=$obj.height();if((nw>w)&&w>0){nw=w;nh=(w/$obj.width())*$obj.height();}
 if((nh>h)&&h>0){nh=h;nw=(h/$obj.height())*$obj.width();}
@@ -49,7 +49,8 @@ return trk;}
 if($.browser.msie&&($.browser.version.split('.')[0]==='6')){ie6mode=true;}
 if(typeof(obj)!=='object'){obj=$(obj)[0];}
 if(typeof(opt)!=='object'){opt={};}
-setOptions(opt);var img_css={border:'none',margin:0,padding:0,position:'absolute',top:0,left:0};var $origimg=$(obj);var $img=$origimg.clone().removeAttr('id').css(img_css).show();$img.width($origimg.width());$img.height($origimg.height());$origimg.after($img).hide();presize($img,options.boxWidth,options.boxHeight);var boundx=$img.width(),boundy=$img.height(),$div=$('<div />').width(boundx).height(boundy).addClass(cssClass('holder')).css({position:'relative',backgroundColor:options.bgColor}).insertAfter($origimg).append($img);if(options.addClass){$div.addClass(options.addClass);}
+setOptions(opt);var img_css={border:'none',margin:0,padding:0,position:'absolute',top:0,left:0};var $origimg=$(obj);if($origimg[0].width!=0&&$origimg[0].height!=0){$origimg.width($origimg[0].width);$origimg.height($origimg[0].height);}else{var tempImage=new Image();tempImage.src=$origimg[0].src;$origimg.width(tempImage.width);$origimg.height(tempImage.height);}
+var $img=$origimg.clone().removeAttr('id').css(img_css).show();$img.width($origimg.width());$img.height($origimg.height());$origimg.after($img).hide();presize($img,options.boxWidth,options.boxHeight);var boundx=$img.width(),boundy=$img.height(),$div=$('<div />').width(boundx).height(boundy).addClass(cssClass('holder')).css({position:'relative',backgroundColor:options.bgColor}).insertAfter($origimg).append($img);if(options.addClass){$div.addClass(options.addClass);}
 var $img2=$('<img />').attr('src',$img.attr('src')).css(img_css).width(boundx).height(boundy),$img_holder=$('<div />').width('100%').height('100%').css({zIndex:310,position:'absolute',overflow:'hidden'}),$hdl_holder=$('<div />').width('100%').height('100%').css('zIndex',320),$sel=$('<div />').css({position:'absolute',zIndex:600}).dblclick(function(){var c=Coords.getFixed();options.onDblClick.call(api,c);}).insertBefore($img).append($img_holder,$hdl_holder);$img_holder.append($img2);if(ie6mode){$sel.css({overflowY:'hidden'});}
 var bound=options.boundary;var $trk=newTracker().width(boundx+(bound*2)).height(boundy+(bound*2)).css({position:'absolute',top:px(-bound),left:px(-bound),zIndex:290}).mousedown(newSelection);var bgcolor=options.bgColor,bgopacity=options.bgOpacity,xlimit,ylimit,xmin,ymin,xscale,yscale,enabled=true,btndown,animating,shift_down;docOffset=getPos($img);var Touch=(function(){function hasTouchSupport(){var support={},events=['touchstart','touchmove','touchend'],el=document.createElement('div'),i;try{for(i=0;i<events.length;i++){var eventName=events[i];eventName='on'+eventName;var isSupported=(eventName in el);if(!isSupported){el.setAttribute(eventName,'return;');isSupported=typeof el[eventName]=='function';}
 support[events[i]]=isSupported;}