Search code examples
javascriptjqueryjcrop

Crop rectangle not visible

I am using the following code to crop: http://www.mikesdotnetting.com/Article/95/Upload-and-Crop-Images-with-jQuery-JCrop-and-ASP.NET

The first part works alright. However, before doing the actual crop, I am unable to see the select rectangle.

Here are the script tags: 

<script src="jquery-1-7.js" type="text/javascript"></script>
<script src="jquery.Jcrop.min.js" type="text/javascript"></script>
<script src="jquery.color.js" type="text/javascript"></script>
<script src="jcrop_main.js" type="text/javascript"></script>
<script src="jquery.Jcrop.js" type="text/javascript"></script>
<script src="jquery.min.js" type="text/javascript"></script>
<link href="jquery.Jcrop.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery('#imgCrop').Jcrop({
                onSelect: storeCoords
        });
    });

    function storeCoords(c) {
        jQuery('#X').val(c.x);
        jQuery('#Y').val(c.y);
        jQuery('#W').val(c.w);
        jQuery('#H').val(c.h);
    };
</script>
Solution

  • You seem to be loading multiple versions of JQuery itself, and the plugin, which is possibly causing problems. Does the browser show any javascript errors?