adding variable into a jquery plugin

Question

Hi, i dont know if it can be done but can you use a variable to use in this instance:

This is the normal way:

jQuery(function() {
    jQuery('#cropbox').Jcrop({
     onChange: showCoords, 
     onSelect: showCoords,
     aspectRatio: 16 / 9
    });
});

wanting to do so like:

var ratioRetrieve = "16 / 9";
var run = true;
if( run === true ) {
    jQuery(function(ratioRetrieve) {
     jQuery('#cropbox').Jcrop({
      onChange: showCoords, 
      onSelect: showCoords,
      aspectRatio: ratioRetrieve
     });
    });
}

EDIT: THIS IS THE FULL CODE

<script language="Javascript">
  $(document).ready(function(){ 
   /**************************** ASPECT RATIO ********************************/
   function getAspectRation(w, h){
    var rem;
    var newW = w;
    var newH = h;   
    while (h != 0) {
     rem = w % h;
     w = h;
     h = rem;
    }   
    newH = newH / w;
    newW = newW / w;   
    return newW / newH;
   }
   function calcRatio(){
    $(".heightAndWidth").keypress(function (e) {
     var newW = $("#outputImageWidth").val();
     var newH = $("#outputImageHeight").val();
     var ratioRetrieve = getAspectRation(newW, newH); 
     return ratioRetrieve;
    });
   }
   function calcRatio2(){
    var newW = $("#outputImageWidth").val();
    var newH = $("#outputImageHeight").val();
    var ratioRetrieve = getAspectRation(newW, newH);
    return ratioRetrieve;
   }
   /**************************** END ASPECT RATIO ********************************/
   /**************** REPLACE TO MAKE ALL NON MOVABLE ANCHORS *********************/
   function anchorChange(){
    $("a").each(function(i){
     var anchorElement = $(this);
     var newAnchorElement = $('<a href="#link01' + i + '" id="' + anchorElement.attr('id') + '" class="' + anchorElement.attr('class') + '" name="#link01' + i + '">' + anchorElement.text() + '</a>').insertBefore(anchorElement);
      anchorElement.remove();
    }); 
   }
   /************** REPLACE TO MAKE ALL NON MOVABLE ANCHORS END *******************/
   /**************************** CLOSE PREVIEW BUTTON ****************************/
   function closePreview(){
    $("#closePreviewButton").bind("click", function(){
     $("#cropResult").animate({
      height: "0px"           
     }, 1000, 
     function(){
      $("#cropResult").remove(); 
     });
    });
   }
   /*********************** END CLOSE PREVIEW BUTTON ****************************/
   /************************** GET HEIGHT AND WIDTH *****************************/
   function getHeightOrWidth(){
    $("#getHeight").bind("click", function(){
     var heightOrWidthVal = $("#outputImageHeight").val();
     var newImagejCrop = $("#filename").val();
     var folderjCrop = $("#hiddenFolder").val();
     var imageDir = folderjCrop + newImagejCrop;
     $("#heightWidthLoad").html('<p>Retrieving height... <img src="../../loader.gif" /></p>');

     $.ajax({
      type: "POST", 
      data: 'dir=' + imageDir + '&heightOrWidth=height', 
      url: 'https://web111.secure-secure.co.uk/snowyswebsolutions.co.uk/ACTfileUploader/imageCrop/func.getSize.php', 
      cache: false, 
      timeout: 12000, 
      error: function(XMLHttpRequest, textStatus, errorThrow){
       $("#heightWidthLoad").html(
       "<span class=\"red\">Error: Network connection low, please try again later.</span>"
      );},  
      success: 
      function(html){
       $("#outputImageHeight").val(html); 
       ratioRetrieve = calcRatio2();
       $("#heightWidthLoad").html('');
      }
     });
    });
    $("#getWidth").bind("click", function(){
     var heightOrWidthVal = $("#outputImageWidth").val();
     var newImagejCrop = $("#filename").val();
     var folderjCrop = $("#hiddenFolder").val();
     var imageDir = folderjCrop + newImagejCrop;
     $("#heightWidthLoad").html('<p>Retrieving width... <img src="../../loader.gif" /></p>');

     $.ajax({
      type: "POST", 
      data: 'dir=' + imageDir + '&heightOrWidth=width', 
      url: 'https://web111.secure-secure.co.uk/snowyswebsolutions.co.uk/ACTfileUploader/imageCrop/func.getSize.php', 
      cache: false, 
      timeout: 12000, 
      error: function(XMLHttpRequest, textStatus, errorThrow){
       $("#heightWidthLoad").html(
       "<span class=\"red\">Error: Network connection low, please try again later.</span>"
      );},  
      success: 
      function(html){
       $("#outputImageWidth").val(html);
       ratioRetrieve = calcRatio2();
       $("#heightWidthLoad").html('');
      }
     });
    });
   }
   /************************** GET HEIGHT AND WIDTH EMD **************************/
   /**************** REMOVE AND INSERT JCROP WITH IMAGE CHANGE *******************/
   function imageChangejCrop(ratioRetrieve){
    run = false;
    $("#imageList").change(function(ratioRetrieve){ 
     var newImagejCrop = $("#imageList :selected").text();
     var folderjCrop = $("#hiddenFolder").val();
     $(".jcrop-holder").remove();
     $("#cropbox").remove();
     $("#imageWrapper").html("<img src=\"" + folderjCrop + newImagejCrop + "\" id=\"cropbox\" />");
     $("#filename").val(newImagejCrop);
     run = true;
     jQuery('#cropbox').Jcrop({
      onChange: showCoords, 
      onSelect: showCoords, 
      aspectRatio: parseInt(ratioRetrieve)
     });
     function showCoords(c){
      jQuery('#x').val(c.x);
      jQuery('#y').val(c.y);
      jQuery('#x2').val(c.x2);
      jQuery('#y2').val(c.y2);
      jQuery('#w').val(c.w);
      jQuery('#h').val(c.h);
     };

     function checkCoords(){
      if (parseInt(jQuery('#w').val())) return true;
      alert('Please select a crop region then press submit.');
      return false;
     };
    });
   }
   /************** REMOVE AND INSERT JCROP WITH IMAGE CHANGE END ***************/

   imageChangejCrop();
   closePreview();
   anchorChange();
   getHeightOrWidth();
   ratioRetrieve = calcRatio();

  });

  /***************************************************************************/

  jQuery(window).load(function() {
   var run = true;
   if( run === true ) {
    jQuery(function(ratioRetrieve) {
     jQuery('#cropbox').Jcrop({
      onChange: showCoords, 
      onSelect: showCoords,
      aspectRatio: parseInt(ratioRetrieve)
     });

    });
   }
   function showCoords(c){
    jQuery('#x').val(c.x);
    jQuery('#y').val(c.y);
    jQuery('#x2').val(c.x2);
    jQuery('#y2').val(c.y2);
    jQuery('#w').val(c.w);
    jQuery('#h').val(c.h);
   };
   function checkCoords(){
    if (parseInt(jQuery('#w').val())) return true;
    alert('Please select a crop region then press submit.');
    return false;
   };
  }); 
 </script>

Answer 1

As long as the scope of the variable is accessible from where your calling it, there should be no problems.

Answer 2

You can, but in the snippet that you posted ratioRetrieve is a string, rather than an integer (and "16 / 9" is not the same as 16 / 9). You can use it like var ratioRetrieve = 16 / 9;

Answer 3

@Phil Jackson comment to Alexander Gyoshev

Are you sure getAspectRation should return an integer? e.g. if you do that 16/9 would return 1.

I guess what you really want is float. But your function should return a float anyway without changing anything.

Else if you somewhere have a number (not an expression) as string and you need it as number do

var x = "0.5123";
return parseInt(x); //if you really want an integer
return parseFloat(x); //if you want a float

So if you really want getAspectRation to return an integer you could do

return parseInt(newW / newH);