Search code examples
phpjqueryhtmlresizejcrop

Jcrop plugin isn't working with resize function


My Jcrop plugin isn't working properly.

I can select an area to crop, but there are no little resize squares at the edges. I don't know if this is a specific function or a default setting.

This is what I mean. My crop area looks like this now:

my picture

My crop background is red and the selected area has the original color, but the strange thing is that there are no resize squares like in this picture:

good picture

My code looks like this:

The head:

<head>
    <title>Het Vergeet-mij-nietje</title>
    <script type="text/javascript" src="js/showfunctie.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.Jcrop.min.js"></script>
    <link rel="stylesheet" href="style/css/demos.css" type="text/css" />

    <script language="Javascript">
        jQuery(function($){

          var jcrop_api;

          $('#cropbox').Jcrop({
            bgColor: 'red'
          },function(){
            jcrop_api = this;
          });

          $('#animbutton').click(function(e){
            jcrop_api.animateTo([ 120,120,80,80 ]);
            return false;
          });

          $('#delselect').click(function(e){
            jcrop_api.release();
            return false;
          });

        });
        </script>
</head>

My image code:

 <div id="content1">
 <?php 
     $target = "uploads/"; 
     $target = $_POST["imagesource"];        
     $target = $target . basename( $_FILES['filename']['name']) ; 
     $ok=1; 
     if(move_uploaded_file($_FILES['filename']['tmp_name'], $target)) 
     {
     echo "De afbeelding *". basename( $_FILES['filename']['name']). "* is geupload naar de map 'uploads'";
     } 
     else {
     echo "Sorry, er is een probleem met het uploaden van de afbeelding.";
     }
 ?> 
 <br /> <br />

 <img id="cropbox" src="<?php echo $target ?>" width="400px" />

 <br /> <br />
</div>

I hope someone knows what's the problem :)


Solution

  • Have you looked at this JCrop styling example? maybe it's a CSS problem?

    Do you have a live example of your code?