js/jcrop/jquery.Jcrop.go.js

   1                 $(function(){
   2                         jQuery("#avatar_original img.avatar").Jcrop({ onChange: showPreview,
   3                                                                                                               setSelect: [ 0, 0, $("#avatar_original img.avatar").attr("width"), $("#avatar_original img.avatar").attr("height") ],
   4                                                                                                                   onSelect: updateCoords,
   5                                                                                                               aspectRatio: 1,
   6                                                                                                                   boxWidth: 480,
   7                                                                                                                   boxHeight: 480,
   8                                                                                                                   bgColor: '#000',
   9                                                                                                                   bgOpacity: .4
  10                                                                                                 });
  11                 });
  12
  13                 function showPreview(coords) {
  14                         var rx = 96 / coords.w;
  15                         var ry = 96 / coords.h;
  16
  17                         var img_width = $("#avatar_original img.avatar").attr("width");
  18                         var img_height = $("#avatar_original img.avatar").attr("height");
  19
  20
  21                         $('#avatar_preview img.avatar').css({
  22                                 width: Math.round(rx *img_width) + 'px',
  23                                 height: Math.round(ry * img_height) + 'px',
  24                                 marginLeft: '-' + Math.round(rx * coords.x) + 'px',
  25                                 marginTop: '-' + Math.round(ry * coords.y) + 'px'
  26                         });
  27                 };
  28
  29                 function updateCoords(c) {
  30                         $('#avatar_crop_x').val(c.x);
  31                         $('#avatar_crop_y').val(c.y);
  32                         $('#avatar_crop_w').val(c.w);
  33                         $('#avatar_crop_h').val(c.h);
  34                 };
  35
  36                 function checkCoords() {
  37                         if (parseInt($('#avatar_crop_w').val())) return true;
  38                         alert('Please select a crop region then press submit.');
  39                         return false;
  40                 };
  41