article:
JS Plugin: Vegas Background
article:
Typography: Pathway Typeface

JS Plugin: Jcrop - Image Cropping

Advertisement

"Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications."

Plugin: Jcrop - Image Cropping


Implements

HEAD

<script src="js/jquery.min.js"></script>
<script src="js/jquery.Jcrop.min.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />

and

basic js code
<script language="Javascript">
    jQuery(function($) {
        $('#target').Jcrop();
    });
</script>
or

advanced js code
jQuery(function($){
  var jcrop_api;
  $('#target').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;
  });
});

HTML
<img src="flowers.jpg" id="target" />


Screenshots

Plugin: Jcrop - Image Cropping

Plugin: Jcrop - Image Cropping


Features

- Attaches unobtrusively to any image
- Supports aspect ratio locking
- Supports minSize/maxSize setting
- Callbacks for selection done, or while moving
- Keyboard support for nudging selection
- API features to create interactivity, including animation
- Support for CSS styling
- Experimental touch support (iOS, Android, etc)


Features currently supported by the API

- Alter callback handlers after instantiation
- Set selection manually
- Obtain current crop coordinates
- Animate current selection to new selection


Cross-platform Compatibility

-Firefox 2+
- Safari 3+
- Opera 9.5+
- Google Chrome 0.2+
- Internet Explorer 6+



source
github
demo
documentation
download

Advertisement
Tags: plugin, image, design, develop, wordpress, cms, layout, jquery, js, crop

Leave a Comment

No Comment

© Creative3x Ltd.