Multiple pictures and prewievs in Jcrop. How to pass many id's to javascript function

Question

I use Jcrop plugin(Jquery) in my app. I decide to use some ajax solution but have a problem with passing value to function. I don't kno whether it is my lack od JavaScript skills or Jcrop issue. Here is code

jQuery(window).load(function(){

            jQuery('#cropbox').Jcrop({
                onChange: showPreview,
                onSelect: showPreview,
                aspectRatio: 1
            });

        });

        // Our simple event handler, called from onChange and onSelect
        // event handlers, as per the Jcrop invocation above
        function showPreview(coords)
        {
            if (parseInt(coords.w) > 0)
            {
                var rx = 100 / coords.w;
                var ry = 100 / coords.h;

                jQuery('#preview').css({
                    width: Math.round(rx * 500) + 'px',
                    height: Math.round(ry * 370) + 'px',
                    marginLeft: '-' + Math.round(rx * coords.x) + 'px',
                    marginTop: '-' + Math.round(ry * coords.y) + 'px'
                });
            }
        }

Working example with one picture is here: link text

What I want is to pass more than one parameter to function showPreview(coords) like:

        function showPreview(coords,id,size_x,size_y)
        {
            if (parseInt(coords.w) > 0)
            {
                var rx = 100 / coords.w;
                var ry = 100 / coords.h;

                jQuery('#'+id).css({
                    width: Math.round(rx * size) + 'px',
                    height: Math.round(ry * size_y) + 'px',
                    marginLeft: '-' + Math.round(rx * coords.x) + 'px',
                    marginTop: '-' + Math.round(ry * coords.y) + 'px'
                });
            }
        }

But error appears. how to solve that?

Answer 1

Try setting the variables outside of the showPreview function. I reformatted the script slightly to make JSLint happy.

jQuery(window).load(function(){

 // define these variables outside of the showPreview function
 var id = 'preview',
     size_x = 500,
     size_y = 370,
     showPreview = function(coords){
      if (parseInt(coords.w,10) > 0){
       var rx = 100 / coords.w;
       var ry = 100 / coords.h;

       jQuery('#'+id).css({
        width: Math.round(rx * size_x) + 'px',
        height: Math.round(ry * size_y) + 'px',
        marginLeft: '-' + Math.round(rx * coords.x) + 'px',
        marginTop: '-' + Math.round(ry * coords.y) + 'px'
       });
      }
     };

 jQuery('#cropbox').Jcrop({
  onChange: showPreview,
  onSelect: showPreview,
  aspectRatio: 1
 });

});