<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<title>API Demo | Jcrop Demo</title>
|
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
|
|
<script src="../js/jquery.min.js"></script>
|
<script src="../js/jquery.Jcrop.js"></script>
|
<script type="text/javascript">
|
jQuery(function($){
|
|
// The variable jcrop_api will hold a reference to the
|
// Jcrop API once Jcrop is instantiated.
|
var jcrop_api;
|
|
// In this example, since Jcrop may be attached or detached
|
// at the whim of the user, I've wrapped the call into a function
|
initJcrop();
|
|
// The function is pretty simple
|
function initJcrop()//{{{
|
{
|
// Hide any interface elements that require Jcrop
|
// (This is for the local user interface portion.)
|
$('.requiresjcrop').hide();
|
|
// Invoke Jcrop in typical fashion
|
$('#target').Jcrop({
|
onRelease: releaseCheck
|
},function(){
|
|
jcrop_api = this;
|
jcrop_api.animateTo([100,100,400,300]);
|
|
// Setup and dipslay the interface for "enabled"
|
$('#can_click,#can_move,#can_size').attr('checked','checked');
|
$('#ar_lock,#size_lock,#bg_swap').attr('checked',false);
|
$('.requiresjcrop').show();
|
|
});
|
|
};
|
//}}}
|
|
// Use the API to find cropping dimensions
|
// Then generate a random selection
|
// This function is used by setSelect and animateTo buttons
|
// Mainly for demonstration purposes
|
function getRandom() {
|
var dim = jcrop_api.getBounds();
|
return [
|
Math.round(Math.random() * dim[0]),
|
Math.round(Math.random() * dim[1]),
|
Math.round(Math.random() * dim[0]),
|
Math.round(Math.random() * dim[1])
|
];
|
};
|
|
// This function is bound to the onRelease handler...
|
// In certain circumstances (such as if you set minSize
|
// and aspectRatio together), you can inadvertently lose
|
// the selection. This callback re-enables creating selections
|
// in such a case. Although the need to do this is based on a
|
// buggy behavior, it's recommended that you in some way trap
|
// the onRelease callback if you use allowSelect: false
|
function releaseCheck()
|
{
|
jcrop_api.setOptions({ allowSelect: true });
|
$('#can_click').attr('checked',false);
|
};
|
|
// Attach interface buttons
|
// This may appear to be a lot of code but it's simple stuff
|
$('#setSelect').click(function(e) {
|
// Sets a random selection
|
jcrop_api.setSelect(getRandom());
|
});
|
$('#animateTo').click(function(e) {
|
// Animates to a random selection
|
jcrop_api.animateTo(getRandom());
|
});
|
$('#release').click(function(e) {
|
// Release method clears the selection
|
jcrop_api.release();
|
});
|
$('#disable').click(function(e) {
|
// Disable Jcrop instance
|
jcrop_api.disable();
|
// Update the interface to reflect disabled state
|
$('#enable').show();
|
$('.requiresjcrop').hide();
|
});
|
$('#enable').click(function(e) {
|
// Re-enable Jcrop instance
|
jcrop_api.enable();
|
// Update the interface to reflect enabled state
|
$('#enable').hide();
|
$('.requiresjcrop').show();
|
});
|
$('#rehook').click(function(e) {
|
// This button is visible when Jcrop has been destroyed
|
// It performs the re-attachment and updates the UI
|
$('#rehook,#enable').hide();
|
initJcrop();
|
$('#unhook,.requiresjcrop').show();
|
return false;
|
});
|
$('#unhook').click(function(e) {
|
// Destroy Jcrop widget, restore original state
|
jcrop_api.destroy();
|
// Update the interface to reflect un-attached state
|
$('#unhook,#enable,.requiresjcrop').hide();
|
$('#rehook').show();
|
return false;
|
});
|
|
// Hook up the three image-swapping buttons
|
$('#img1').click(function(e) {
|
$(this).addClass('active').closest('.btn-group')
|
.find('button.active').not(this).removeClass('active');
|
|
jcrop_api.setImage('demo_files/sago.jpg');
|
jcrop_api.setOptions({ bgOpacity: .6 });
|
return false;
|
});
|
$('#img2').click(function(e) {
|
$(this).addClass('active').closest('.btn-group')
|
.find('button.active').not(this).removeClass('active');
|
|
jcrop_api.setImage('demo_files/pool.jpg');
|
jcrop_api.setOptions({ bgOpacity: .6 });
|
return false;
|
});
|
$('#img3').click(function(e) {
|
$(this).addClass('active').closest('.btn-group')
|
.find('button.active').not(this).removeClass('active');
|
|
jcrop_api.setImage('demo_files/sago.jpg',function(){
|
this.setOptions({
|
bgOpacity: 1,
|
outerImage: 'demo_files/sagomod.jpg'
|
});
|
this.animateTo(getRandom());
|
});
|
return false;
|
});
|
|
// The checkboxes simply set options based on it's checked value
|
// Options are changed by passing a new options object
|
|
// Also, to prevent strange behavior, they are initially checked
|
// This matches the default initial state of Jcrop
|
|
$('#can_click').change(function(e) {
|
jcrop_api.setOptions({ allowSelect: !!this.checked });
|
jcrop_api.focus();
|
});
|
$('#can_move').change(function(e) {
|
jcrop_api.setOptions({ allowMove: !!this.checked });
|
jcrop_api.focus();
|
});
|
$('#can_size').change(function(e) {
|
jcrop_api.setOptions({ allowResize: !!this.checked });
|
jcrop_api.focus();
|
});
|
$('#ar_lock').change(function(e) {
|
jcrop_api.setOptions(this.checked?
|
{ aspectRatio: 4/3 }: { aspectRatio: 0 });
|
jcrop_api.focus();
|
});
|
$('#size_lock').change(function(e) {
|
jcrop_api.setOptions(this.checked? {
|
minSize: [ 80, 80 ],
|
maxSize: [ 350, 350 ]
|
}: {
|
minSize: [ 0, 0 ],
|
maxSize: [ 0, 0 ]
|
});
|
jcrop_api.focus();
|
});
|
|
});
|
|
|
</script>
|
<link rel="stylesheet" href="demo_files/main.css" type="text/css" />
|
<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
|
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
|
<style type="text/css">
|
.optdual { position: relative; }
|
.optdual .offset { position: absolute; left: 18em; }
|
.optlist label { width: 16em; display: block; }
|
#dl_links { margin-top: .5em; }
|
|
</style>
|
|
</head>
|
<body>
|
|
<div class="container">
|
<div class="row">
|
<div class="span12">
|
<div class="jc-demo-box">
|
|
<div class="page-header">
|
<ul class="breadcrumb first">
|
<li><a href="../index.html">Jcrop</a> <span class="divider">/</span></li>
|
<li><a href="../index.html">Demos</a> <span class="divider">/</span></li>
|
<li class="active">API Demo</li>
|
</ul>
|
<h1>API Demo</h1>
|
</div>
|
|
<img src="demo_files/sago.jpg" id="target" alt="[Jcrop Example]" />
|
|
<div style="margin: .8em 0 .5em;">
|
<span class="requiresjcrop">
|
<button id="setSelect" class="btn btn-mini">setSelect</button>
|
<button id="animateTo" class="btn btn-mini">animateTo</button>
|
<button id="release" class="btn btn-mini">Release</button>
|
<button id="disable" class="btn btn-mini">Disable</button>
|
</span>
|
<button id="enable" class="btn btn-mini" style="display:none;">Re-Enable</button>
|
<button id="unhook" class="btn btn-mini">Destroy!</button>
|
<button id="rehook" class="btn btn-mini" style="display:none;">Attach Jcrop</button>
|
</div>
|
|
<fieldset class="optdual requiresjcrop">
|
<legend>Option Toggles</legend>
|
<div class="optlist offset">
|
<label><input type="checkbox" id="ar_lock" />Aspect ratio</label>
|
<label><input type="checkbox" id="size_lock" />minSize/maxSize setting</label>
|
</div>
|
<div class="optlist">
|
<label><input type="checkbox" id="can_click" />Allow new selections</label>
|
<label><input type="checkbox" id="can_move" />Selection can be moved</label>
|
<label><input type="checkbox" id="can_size" />Resizable selection</label>
|
</div>
|
</fieldset>
|
|
<fieldset class="requiresjcrop" style="margin: .5em 0;">
|
<legend>Change Image</legend>
|
<div class="btn-group">
|
<button class="btn" id="img2">Pool</button>
|
<button class="btn active" id="img1">Sago</button>
|
<button class="btn" id="img3">Sago w/ outerImage</button>
|
</div>
|
</fieldset>
|
|
|
|
<div class="tapmodo-footer">
|
<a href="http://tapmodo.com" class="tapmodo-logo segment">tapmodo.com</a>
|
<div class="segment"><b>© 2008-2013 Tapmodo Interactive LLC</b><br />
|
Jcrop is free software released under <a href="../MIT-LICENSE.txt">MIT License</a>
|
</div>
|
</div>
|
|
<div class="clearfix"></div>
|
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</body>
|
</html>
|
