Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • Jcrop image croping

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 534
    Comment on it

    1- Place JS and CSS files under head tag.

    • jquery.min.js
    • jquery.Jcrop.js
    • main.css
    • demos.css
    • jquery.Jcrop.css


    2- Also copy and paste bellow piece of javascript code under head tag.

    <script type="text/javascript">
            aspectRatio: 1,
            onSelect: updateCoords
            function updateCoords(c)
            function checkCoords()
            if (parseInt($('#w').val())) return true;
            alert('Please select a crop region then press submit.');
            return false;


    3- Copy and paste CSS code under head code.

    <style type="text/css">
            #target {
              background-color: #ccc;
              width: 500px;
              height: 330px;
              font-size: 24px;
              display: block;


    4- Copy and paste following HTML code inside body tag.

    <div class="container">
        <div class="row">
            <div class="span12">
                <div class="jc-demo-box">
                    <div class="page-header">
                        <h1>Jcrop Image Cropping</h1>
                    <!-- This is the image we're attaching Jcrop to -->
                    <img src="image/sago.jpg" id="cropbox" />
                    <!-- This is the form that our event handler fills -->
                    <form action="crop.php" method="post" onsubmit="return checkCoords();">
                        <input type="hidden" id="x" name="x" />
                        <input type="hidden" id="y" name="y" />
                        <input type="hidden" id="w" name="w" />
                        <input type="hidden" id="h" name="h" />
                        <input type="submit" value="Crop Image" class="btn btn-large btn-inverse" />


    5- You can download files from file list.

 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: