over 6 years ago
1- Place JS and CSS files under head tag.
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.
Starting with Chrome version 45, NPAPI is no longer supported for Google Chrome. For more information, see Chrome and NPAPI (blog.chromium.org).
Firefox and Microsoft Internet Explorer are recommended browsers for websites using java applets.
Chrome Version Support
Are you sure, you want to delete this comment?
Sign up using
0 Comment(s)