Search code examples
javascriptjqueryhtmljsfiddlejcrop

JCrop - functionality doesn't get implemented

I want to use JCrop to crop an image. I tried implementing a very simple useage on JSFiddle.

I included JQuery, JCrop and the JCrop CSS using CDN-Links.

This is my code:

HEADER:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://jcrop-cdn.tapmodo.com/v2.0.0-RC1/js/Jcrop.js"></script>
<link rel="stylesheet" href="http://jcrop-cdn.tapmodo.com/v2.0.0-RC1/css/Jcrop.css" type="text/css">

HTML:

<body>
  <img src="http://deepliquid.com/projects/Jcrop/demos/demo_files/sago.jpg" id="cropTarget" />
</body>

JS:

<script type="text/javascript">
$(document).ready(function() {
  initJCrop();          
});
function initJCrop() {
  $('#cropTarget').Jcrop({bgColor: "black",bgOpacity: .4,aspectRatio: 100 / 130,setSelect: [200, 260, 50, 50]});
}
</script>

As you can see, in my JSFiddle, it simply shows a "normal" image and I can't get JCrop to work.

What I've tried:

Solution

  • I was able to resolve this issue by my self:

    1) Change - <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    To: - <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    2) Move the JS from the header to the bottom of the body (right before the <\body>-Tag).

    Somehow my $(document).ready(function() {..})-part didn't work and initJcrop() was never called.