Jcrop not dragging

Jcrop not dragging

It uploads the image alright and highlights an area to be cropped but you can't drag the area and I have no idea why? Which bit does the drag or do I have some css missing?  I presume it is possible to crop ore than one image on a page with more than one copy of the Jquery code with different field Ids? Thanks




  1. function updateInfo(e) {
  2.     $('#x1').val(e.x);
  3.     $('#y1').val(e.y);
  4.     $('#x2').val(e.x2);
  5.     $('#y2').val(e.y2);
  6.     $('#w').val(e.w);
  7.     $('#h').val(e.h);
  8. };
  9.  
  10. // clear info by cropping (onRelease event handler)
  11. function clearInfo() {
  12.     $('#w').val('');
  13.     $('#h').val('');
  14. };
  15.  
  16. // Create variables (in this scope) to hold the Jcrop API and image size
  17. var jcrop_api, boundx, boundy;
  18.  
  19. function fileSelectHandler1() {
  20.     // get selected file
  21.     var oFile = $('#browse_file1')[0].files[0];
  22.     // hide all errors
  23.     $('.error').hide();
  24.     // check for image type (jpg and png are allowed)
  25.     var rFilter = /^(image\/jpeg|image\/png)$/i;
  26.     if (! rFilter.test(oFile.type)) {
  27.         $('.error').html('Please select a valid image file (jpg and png are allowed)').show();
  28.         return;
  29.     }
  30.     // check for file size
  31.     if (oFile.size > 250 * 1024) {
  32.         $('.error').html('You have selected too big file, please select a one smaller image file').show();
  33.         return;
  34.     }
  35.     // preview element
  36.     var oImage = document.getElementById('image1');
  37.     // prepare HTML5 FileReader
  38.     var oReader = new FileReader();
  39.         oReader.onload = function(e) {
  40.  
  41.         // e.target.result contains the DataURL which we can use as a source of the image
  42.         oImage.src = e.target.result;
  43.         oImage.onload = function () { // onload event handler
  44. // display step 2
  45.                 $('.step2').fadeIn(500);
  46.             // destroy Jcrop if it is existed
  47.             if (typeof jcrop_api != 'undefined') {
  48.                 jcrop_api.destroy();
  49.                 jcrop_api = null;
  50.                 $('#image1').width(oImage.naturalWidth);
  51.                 $('#image1').height(oImage.naturalHeight);
  52.             }
  53.             setTimeout(function(){
  54.                 // initialize Jcrop               
  55.                 $('#image1').Jcrop({
  56.                     minSize: [32, 32], // min crop size
  57.                     aspectRatio : 1, // keep aspect ratio 1:1
  58.                     bgFade: true, // use fade effect
  59.                     bgOpacity: .3, // fade opacity
  60.                     onChange: updateInfo,
  61.                     onSelect: updateInfo,
  62.                     onRelease: clearInfo
  63.                 }, function(){
  64.                     // use the Jcrop API to get the real image size
  65.                     var bounds = this.getBounds();
  66.                     boundx = bounds[0];
  67.                     boundy = bounds[1];
  68.                     // Store the Jcrop API in the jcrop_api variable
  69.                     jcrop_api = this;
  70.                 });
  71.             },3000);
  72.         };
  73.     };
  74.  
  75.     // read selected file as DataURL
  76.     oReader.readAsDataURL(oFile);
  77. }