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
    • 522
    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">
    
            $(function(){
    
            $('#cropbox').Jcrop({
            aspectRatio: 1,
            onSelect: updateCoords
            });
    
            });
    
            function updateCoords(c)
            {
            $('#x').val(c.x);
            $('#y').val(c.y);
            $('#w').val(c.w);
            $('#h').val(c.h);
            };
    
            function checkCoords()
            {
            if (parseInt($('#w').val())) return true;
            alert('Please select a crop region then press submit.');
            return false;
            };
    
          </script>

     

    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;
            }
    </style>

     

    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>
                    </div>
    
                    <!-- 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" />
                    </form>
                </div>
            </div>
        </div>
    </div>

     

    5- You can download files from file list.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
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: