title: Resize image which uses Jcrop
body: <p>I use the Jquery Jcrop for cropping my images. Now I'm implementing a slider for resizing the image. I want the cropping and resizing to happend on the same page.</p>
  
  <p>I do it like this:</p>
  
  <pre><code>$(document).ready(function() {
  
  
      var img = $('#cropbox')[0]; // Get my img elem
      var orgwidth, orgheight;
      $("&lt;img/&gt;") // Make in memory copy of image to avoid css issues
          .attr("src", $(img).attr("src"))
          .load(function() {
              orgwidth = this.width;   // Note: $(this).width() will not
              orgheight = this.height; // work for in memory images.
          });
  
      $('#cropbox').Jcrop({
          onSelect: updateCoords
      });
  
      $("#imageslider").slider({
          value: 100,
          max: 100,
          min: 1,
          slide: function(event, ui) {
              //$('ul#grid li').css('font-size',ui.value+"px");
              resizeImage(orgwidth, orgheight);
          }
      });
  
  });
  </code></pre>
  
  <p>And my simple resizeImage function:</p>
  
  <pre><code>function resizeImage(orgwidth, orgheight) {
      var value = $('#imageslider').slider('option', 'value');
      var width = orgwidth * (value / 100);
      var height = orgheight * (value / 100);
      $('#cropbox').width(width);
      $('#cropbox').height(height);
      $('#tester').val("org: "+orgwidth+" now: "+width);
  }
  </code></pre>
  
  <p>The problem is that, as soon I turn on Jcrop I can't resize the image. How can I use both these functions at the same time?</p>