Initial commit
124
app/static/global/plugins/jcrop/demos/crop.php
Normal file
@@ -0,0 +1,124 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* Jcrop image cropping plugin for jQuery
|
||||
* Example cropping script
|
||||
* @copyright 2008-2009 Kelly Hallman
|
||||
* More info: http://deepliquid.com/content/Jcrop_Implementation_Theory.html
|
||||
*/
|
||||
|
||||
if ($_SERVER['REQUEST_METHOD'] == 'POST')
|
||||
{
|
||||
$targ_w = $targ_h = 150;
|
||||
$jpeg_quality = 90;
|
||||
|
||||
$src = './demo_files/image5.jpg';
|
||||
$img_r = imagecreatefromjpeg($src);
|
||||
|
||||
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
|
||||
|
||||
imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
|
||||
$targ_w,$targ_h,$_POST['w'],$_POST['h']);
|
||||
|
||||
header('Content-type: image/jpeg');
|
||||
imagejpeg($dst_r,null,$jpeg_quality);
|
||||
|
||||
exit;
|
||||
}
|
||||
|
||||
// If not a POST request, display page below:
|
||||
|
||||
?><!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Live Cropping 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>
|
||||
<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" />
|
||||
|
||||
<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>
|
||||
<style type="text/css">
|
||||
#target {
|
||||
background-color: #ccc;
|
||||
width: 500px;
|
||||
height: 330px;
|
||||
font-size: 24px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
</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">Live Demo (Requires PHP)</li>
|
||||
</ul>
|
||||
<h1>Server-based Cropping Behavior</h1>
|
||||
</div>
|
||||
|
||||
<!-- This is the image we're attaching Jcrop to -->
|
||||
<img src="demo_files/pool.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>
|
||||
|
||||
<p>
|
||||
<b>An example server-side crop script.</b> Hidden form values
|
||||
are set when a selection is made. If you press the <i>Crop Image</i>
|
||||
button, the form will be submitted and a 150x150 thumbnail will be
|
||||
dumped to the browser. Try it!
|
||||
</p>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
149
app/static/global/plugins/jcrop/demos/demo_files/demos.css
Normal file
@@ -0,0 +1,149 @@
|
||||
/* Jcrop Demo Site CSS - 2012 Tapmodo Interactive LLC - MIT License
|
||||
Not required to run Jcrop - contains twitter bootstrap code */
|
||||
/* To build these CSS files you must have LESS and run
|
||||
* $ git submodule init
|
||||
* $ git submodule update
|
||||
* ...to pull in the Twitter bootstrap files
|
||||
*/
|
||||
.clearfix {
|
||||
*zoom: 1;
|
||||
}
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
display: table;
|
||||
content: "";
|
||||
line-height: 0;
|
||||
}
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
.hide-text {
|
||||
font: 0/0 a;
|
||||
color: transparent;
|
||||
text-shadow: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
.input-block-level {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 30px;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* JCROP DEMOS CSS */
|
||||
li small {
|
||||
color: #f07878;
|
||||
}
|
||||
.inline-labels label {
|
||||
display: inline;
|
||||
}
|
||||
div#interface.span3 fieldset {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
div#interface.span3 fieldset legend {
|
||||
margin-bottom: 2px;
|
||||
padding-bottom: 2px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.article h1 {
|
||||
color: #333;
|
||||
margin-top: .2em;
|
||||
}
|
||||
.jc-demo {
|
||||
text-align: center;
|
||||
}
|
||||
.jcropper-holder {
|
||||
border: 1px #bbb solid;
|
||||
}
|
||||
.jc-demo-box {
|
||||
text-align: left;
|
||||
margin: 2em auto;
|
||||
background: white;
|
||||
border: 1px #bbb solid;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25);
|
||||
-moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25);
|
||||
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25);
|
||||
padding: 1em 2em 2em;
|
||||
}
|
||||
form {
|
||||
margin: 1.5em 0;
|
||||
}
|
||||
form.coords label {
|
||||
margin-right: 1em;
|
||||
font-weight: bold;
|
||||
color: #900;
|
||||
}
|
||||
form.coords input {
|
||||
width: 3em;
|
||||
}
|
||||
.ui-widget-overlay {
|
||||
opacity: 0.80;
|
||||
filter: alpha(opacity=70);
|
||||
}
|
||||
.jc-dialog {
|
||||
padding-top: 1em;
|
||||
}
|
||||
.ui-dialog p tt {
|
||||
color: yellow;
|
||||
}
|
||||
.jcrop-light .jcrop-selection {
|
||||
-moz-box-shadow: 0px 0px 15px #999;
|
||||
/* Firefox */
|
||||
|
||||
-webkit-box-shadow: 0px 0px 15px #999;
|
||||
/* Safari, Chrome */
|
||||
|
||||
box-shadow: 0px 0px 15px #999;
|
||||
/* CSS3 */
|
||||
|
||||
}
|
||||
.jcrop-dark .jcrop-selection {
|
||||
-moz-box-shadow: 0px 0px 15px #000;
|
||||
/* Firefox */
|
||||
|
||||
-webkit-box-shadow: 0px 0px 15px #000;
|
||||
/* Safari, Chrome */
|
||||
|
||||
box-shadow: 0px 0px 15px #000;
|
||||
/* CSS3 */
|
||||
|
||||
}
|
||||
.jcrop-fancy .jcrop-handle.ord-e {
|
||||
-webkit-border-top-left-radius: 0px;
|
||||
-webkit-border-bottom-left-radius: 0px;
|
||||
}
|
||||
.jcrop-fancy .jcrop-handle.ord-w {
|
||||
-webkit-border-top-right-radius: 0px;
|
||||
-webkit-border-bottom-right-radius: 0px;
|
||||
}
|
||||
.jcrop-fancy .jcrop-handle.ord-nw {
|
||||
-webkit-border-bottom-right-radius: 0px;
|
||||
}
|
||||
.jcrop-fancy .jcrop-handle.ord-ne {
|
||||
-webkit-border-bottom-left-radius: 0px;
|
||||
}
|
||||
.jcrop-fancy .jcrop-handle.ord-sw {
|
||||
-webkit-border-top-right-radius: 0px;
|
||||
}
|
||||
.jcrop-fancy .jcrop-handle.ord-se {
|
||||
-webkit-border-top-left-radius: 0px;
|
||||
}
|
||||
.jcrop-fancy .jcrop-handle.ord-s {
|
||||
-webkit-border-top-left-radius: 0px;
|
||||
-webkit-border-top-right-radius: 0px;
|
||||
}
|
||||
.jcrop-fancy .jcrop-handle.ord-n {
|
||||
-webkit-border-bottom-left-radius: 0px;
|
||||
-webkit-border-bottom-right-radius: 0px;
|
||||
}
|
||||
.description {
|
||||
margin: 16px 0;
|
||||
}
|
||||
.jcrop-droptarget canvas {
|
||||
background-color: #f0f0f0;
|
||||
}
|
BIN
app/static/global/plugins/jcrop/demos/demo_files/image1.jpg
Normal file
After Width: | Height: | Size: 141 KiB |
BIN
app/static/global/plugins/jcrop/demos/demo_files/image2.jpg
Normal file
After Width: | Height: | Size: 236 KiB |
BIN
app/static/global/plugins/jcrop/demos/demo_files/image3.jpg
Normal file
After Width: | Height: | Size: 174 KiB |
BIN
app/static/global/plugins/jcrop/demos/demo_files/image4.jpg
Normal file
After Width: | Height: | Size: 245 KiB |
BIN
app/static/global/plugins/jcrop/demos/demo_files/image5.jpg
Normal file
After Width: | Height: | Size: 243 KiB |
4996
app/static/global/plugins/jcrop/demos/demo_files/main.css
Normal file
BIN
app/static/global/plugins/jcrop/demos/demo_files/pool.jpg
Normal file
After Width: | Height: | Size: 27 KiB |
BIN
app/static/global/plugins/jcrop/demos/demo_files/sago.jpg
Normal file
After Width: | Height: | Size: 18 KiB |
BIN
app/static/global/plugins/jcrop/demos/demo_files/sagomod.jpg
Normal file
After Width: | Height: | Size: 16 KiB |
BIN
app/static/global/plugins/jcrop/demos/demo_files/sagomod.png
Normal file
After Width: | Height: | Size: 77 KiB |
84
app/static/global/plugins/jcrop/demos/non-image.html
Normal file
@@ -0,0 +1,84 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Non-image Cropping | 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($){
|
||||
|
||||
// I did JSON.stringify(jcrop_api.tellSelect()) on a crop I liked:
|
||||
var c = {"x":13,"y":7,"x2":487,"y2":107,"w":474,"h":100};
|
||||
|
||||
$('#target').Jcrop({
|
||||
bgFade: true,
|
||||
setSelect: [c.x,c.y,c.x2,c.y2]
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
</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">
|
||||
#target {
|
||||
background-color: #ccc;
|
||||
width: 500px;
|
||||
height: 330px;
|
||||
font-size: 24px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
</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">Non-image Cropping</li>
|
||||
</ul>
|
||||
<h1>Non-image Cropping</h1>
|
||||
</div>
|
||||
|
||||
<p id="target">
|
||||
<b style="display:block; padding: .5em 1em;">
|
||||
This is an example of attaching Jcrop to a target that is not an image. You are now cropping a paragraph tag.
|
||||
</b>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<h4>Attaching Jcrop to a non-image element.</h4>
|
||||
This is mostly useful to implement other interfaces, such as <tt>canvas</tt> or over an arbitrary <tt>div</tt>.
|
||||
</p>
|
||||
|
||||
|
||||
<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>
|
||||
|
118
app/static/global/plugins/jcrop/demos/styling.html
Normal file
@@ -0,0 +1,118 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>CSS Styling Example | 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 src="../js/jquery.color.js"></script>
|
||||
<script type="text/javascript">
|
||||
jQuery(function($){
|
||||
|
||||
var api;
|
||||
|
||||
$('#target').Jcrop({
|
||||
// start off with jcrop-light class
|
||||
bgOpacity: 0.5,
|
||||
bgColor: 'white',
|
||||
addClass: 'jcrop-light'
|
||||
},function(){
|
||||
api = this;
|
||||
api.setSelect([130,65,130+350,65+285]);
|
||||
api.setOptions({ bgFade: true });
|
||||
api.ui.selection.addClass('jcrop-selection');
|
||||
});
|
||||
|
||||
$('#buttonbar').on('click','button',function(e){
|
||||
var $t = $(this), $g = $t.closest('.btn-group');
|
||||
$g.find('button.active').removeClass('active');
|
||||
$t.addClass('active');
|
||||
$g.find('[data-setclass]').each(function(){
|
||||
var $th = $(this), c = $th.data('setclass'),
|
||||
a = $th.hasClass('active');
|
||||
if (a) {
|
||||
api.ui.holder.addClass(c);
|
||||
switch(c){
|
||||
|
||||
case 'jcrop-light':
|
||||
api.setOptions({ bgColor: 'white', bgOpacity: 0.5 });
|
||||
break;
|
||||
|
||||
case 'jcrop-dark':
|
||||
api.setOptions({ bgColor: 'black', bgOpacity: 0.4 });
|
||||
break;
|
||||
|
||||
case 'jcrop-normal':
|
||||
api.setOptions({
|
||||
bgColor: $.Jcrop.defaults.bgColor,
|
||||
bgOpacity: $.Jcrop.defaults.bgOpacity
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
else api.ui.holder.removeClass(c);
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
</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" />
|
||||
|
||||
</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">CSS Styling Example</li>
|
||||
</ul>
|
||||
<h1>CSS Styling Example</h1>
|
||||
</div>
|
||||
|
||||
<img src="demo_files/sago.jpg" id="target" alt="[Jcrop Example]" />
|
||||
|
||||
<div style="margin-top:1em; width:500px;">
|
||||
<fieldset>
|
||||
<legend>Manipulate classes</legend>
|
||||
<div class="btn-group" id="buttonbar">
|
||||
<button id="radio1" data-setclass="jcrop-light" class="btn active" />jcrop-light</button>
|
||||
<button id="radio2" data-setclass="jcrop-dark" class="btn" />jcrop-dark</button>
|
||||
<button id="radio3" data-setclass="jcrop-normal" class="btn" />normal</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<b>Example styling tricks.</b> Click the buttons above to change the appearance of Jcrop in real-time.
|
||||
</p>
|
||||
|
||||
|
||||
<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>
|
||||
|
65
app/static/global/plugins/jcrop/demos/tutorial1.html
Normal file
@@ -0,0 +1,65 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Hello World | 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($){
|
||||
|
||||
// How easy is this??
|
||||
$('#target').Jcrop();
|
||||
|
||||
});
|
||||
|
||||
</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" />
|
||||
|
||||
</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">Hello World</li>
|
||||
</ul>
|
||||
<h1>Hello World</h1>
|
||||
</div>
|
||||
|
||||
<img src="demo_files/sago.jpg" id="target" alt="[Jcrop Example]" />
|
||||
|
||||
<div class="description">
|
||||
<p>
|
||||
<b>This example demonstrates the default behavior of Jcrop.</b><br />
|
||||
Since no event handlers have been attached it only performs
|
||||
the cropping behavior.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
123
app/static/global/plugins/jcrop/demos/tutorial2.html
Normal file
@@ -0,0 +1,123 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Basic Handler | 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($){
|
||||
|
||||
var jcrop_api;
|
||||
|
||||
$('#target').Jcrop({
|
||||
onChange: showCoords,
|
||||
onSelect: showCoords,
|
||||
onRelease: clearCoords
|
||||
},function(){
|
||||
jcrop_api = this;
|
||||
});
|
||||
|
||||
$('#coords').on('change','input',function(e){
|
||||
var x1 = $('#x1').val(),
|
||||
x2 = $('#x2').val(),
|
||||
y1 = $('#y1').val(),
|
||||
y2 = $('#y2').val();
|
||||
jcrop_api.setSelect([x1,y1,x2,y2]);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
// Simple event handler, called from onChange and onSelect
|
||||
// event handlers, as per the Jcrop invocation above
|
||||
function showCoords(c)
|
||||
{
|
||||
$('#x1').val(c.x);
|
||||
$('#y1').val(c.y);
|
||||
$('#x2').val(c.x2);
|
||||
$('#y2').val(c.y2);
|
||||
$('#w').val(c.w);
|
||||
$('#h').val(c.h);
|
||||
};
|
||||
|
||||
function clearCoords()
|
||||
{
|
||||
$('#coords input').val('');
|
||||
};
|
||||
|
||||
|
||||
|
||||
</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" />
|
||||
|
||||
</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">Basic Handler</li>
|
||||
</ul>
|
||||
<h1>Basic Handler</h1>
|
||||
</div>
|
||||
|
||||
<!-- This is the image we're attaching Jcrop to -->
|
||||
<img src="demo_files/sago.jpg" id="target" alt="[Jcrop Example]" />
|
||||
|
||||
<!-- This is the form that our event handler fills -->
|
||||
<form id="coords"
|
||||
class="coords"
|
||||
onsubmit="return false;"
|
||||
action="http://example.com/post.php">
|
||||
|
||||
<div class="inline-labels">
|
||||
<label>X1 <input type="text" size="4" id="x1" name="x1" /></label>
|
||||
<label>Y1 <input type="text" size="4" id="y1" name="y1" /></label>
|
||||
<label>X2 <input type="text" size="4" id="x2" name="x2" /></label>
|
||||
<label>Y2 <input type="text" size="4" id="y2" name="y2" /></label>
|
||||
<label>W <input type="text" size="4" id="w" name="w" /></label>
|
||||
<label>H <input type="text" size="4" id="h" name="h" /></label>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="description">
|
||||
<p>
|
||||
<b>An example with a basic event handler.</b> Here we've tied
|
||||
several form values together with a simple event handler invocation.
|
||||
The result is that the form values are updated in real-time as
|
||||
the selection is changed using Jcrop's <em>onChange</em> handler.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
That's how easily Jcrop can be integrated into a traditional web form!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<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>
|
||||
|
151
app/static/global/plugins/jcrop/demos/tutorial3.html
Normal file
@@ -0,0 +1,151 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Aspect Ratio with Preview Pane | 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($){
|
||||
|
||||
// Create variables (in this scope) to hold the API and image size
|
||||
var jcrop_api,
|
||||
boundx,
|
||||
boundy,
|
||||
|
||||
// Grab some information about the preview pane
|
||||
$preview = $('#preview-pane'),
|
||||
$pcnt = $('#preview-pane .preview-container'),
|
||||
$pimg = $('#preview-pane .preview-container img'),
|
||||
|
||||
xsize = $pcnt.width(),
|
||||
ysize = $pcnt.height();
|
||||
|
||||
console.log('init',[xsize,ysize]);
|
||||
$('#target').Jcrop({
|
||||
onChange: updatePreview,
|
||||
onSelect: updatePreview,
|
||||
aspectRatio: xsize / ysize
|
||||
},function(){
|
||||
// Use the API to get the real image size
|
||||
var bounds = this.getBounds();
|
||||
boundx = bounds[0];
|
||||
boundy = bounds[1];
|
||||
// Store the API in the jcrop_api variable
|
||||
jcrop_api = this;
|
||||
|
||||
// Move the preview into the jcrop container for css positioning
|
||||
$preview.appendTo(jcrop_api.ui.holder);
|
||||
});
|
||||
|
||||
function updatePreview(c)
|
||||
{
|
||||
if (parseInt(c.w) > 0)
|
||||
{
|
||||
var rx = xsize / c.w;
|
||||
var ry = ysize / c.h;
|
||||
|
||||
$pimg.css({
|
||||
width: Math.round(rx * boundx) + 'px',
|
||||
height: Math.round(ry * boundy) + 'px',
|
||||
marginLeft: '-' + Math.round(rx * c.x) + 'px',
|
||||
marginTop: '-' + Math.round(ry * c.y) + 'px'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
|
||||
</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">
|
||||
|
||||
/* Apply these styles only when #preview-pane has
|
||||
been placed within the Jcrop widget */
|
||||
.jcrop-holder #preview-pane {
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 2000;
|
||||
top: 10px;
|
||||
right: -280px;
|
||||
padding: 6px;
|
||||
border: 1px rgba(0,0,0,.4) solid;
|
||||
background-color: white;
|
||||
|
||||
-webkit-border-radius: 6px;
|
||||
-moz-border-radius: 6px;
|
||||
border-radius: 6px;
|
||||
|
||||
-webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
|
||||
-moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* The Javascript code will set the aspect ratio of the crop
|
||||
area based on the size of the thumbnail preview,
|
||||
specified here */
|
||||
#preview-pane .preview-container {
|
||||
width: 250px;
|
||||
height: 170px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
</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">Aspect Ratio with Preview Pane</li>
|
||||
</ul>
|
||||
<h1>Aspect Ratio with Preview Pane</h1>
|
||||
</div>
|
||||
|
||||
<img src="demo_files/sago.jpg" id="target" alt="[Jcrop Example]" />
|
||||
|
||||
<div id="preview-pane">
|
||||
<div class="preview-container">
|
||||
<img src="demo_files/sago.jpg" class="jcrop-preview" alt="Preview" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="description">
|
||||
<p>
|
||||
<b>An example implementing a preview pane.</b>
|
||||
Obviously the most visual demo, the preview pane is accomplished
|
||||
entirely outside of Jcrop with a simple jQuery-flavored callback.
|
||||
This type of interface could be useful for creating a thumbnail
|
||||
or avatar. The onChange event handler is used to update the
|
||||
view in the preview pane.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
227
app/static/global/plugins/jcrop/demos/tutorial4.html
Normal file
@@ -0,0 +1,227 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Animations + Transitions | 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 src="../js/jquery.color.js"></script>
|
||||
<script type="text/javascript">
|
||||
jQuery(function($){
|
||||
|
||||
var jcrop_api;
|
||||
|
||||
$('#target').Jcrop({
|
||||
bgFade: true,
|
||||
bgOpacity: .2,
|
||||
setSelect: [ 60, 70, 540, 330 ]
|
||||
},function(){
|
||||
jcrop_api = this;
|
||||
});
|
||||
|
||||
$('#fadetog').change(function(){
|
||||
jcrop_api.setOptions({
|
||||
bgFade: this.checked
|
||||
});
|
||||
}).attr('checked','checked');
|
||||
|
||||
$('#shadetog').change(function(){
|
||||
if (this.checked) $('#shadetxt').slideDown();
|
||||
else $('#shadetxt').slideUp();
|
||||
jcrop_api.setOptions({
|
||||
shade: this.checked
|
||||
});
|
||||
}).attr('checked',false);
|
||||
|
||||
// Define page sections
|
||||
var sections = {
|
||||
bgc_buttons: 'Change bgColor',
|
||||
bgo_buttons: 'Change bgOpacity',
|
||||
anim_buttons: 'Animate Selection'
|
||||
};
|
||||
// Define animation buttons
|
||||
var ac = {
|
||||
anim1: [217,122,382,284],
|
||||
anim2: [20,20,580,380],
|
||||
anim3: [24,24,176,376],
|
||||
anim4: [347,165,550,355],
|
||||
anim5: [136,55,472,183]
|
||||
};
|
||||
// Define bgOpacity buttons
|
||||
var bgo = {
|
||||
Low: .2,
|
||||
Mid: .5,
|
||||
High: .8,
|
||||
Full: 1
|
||||
};
|
||||
// Define bgColor buttons
|
||||
var bgc = {
|
||||
R: '#900',
|
||||
B: '#4BB6F0',
|
||||
Y: '#F0B207',
|
||||
G: '#46B81C',
|
||||
W: 'white',
|
||||
K: 'black'
|
||||
};
|
||||
// Create fieldset targets for buttons
|
||||
for(i in sections)
|
||||
insertSection(i,sections[i]);
|
||||
|
||||
function create_btn(c) {
|
||||
var $o = $('<button />').addClass('btn btn-small');
|
||||
if (c) $o.append(c);
|
||||
return $o;
|
||||
}
|
||||
|
||||
var a_count = 1;
|
||||
// Create animation buttons
|
||||
for(i in ac) {
|
||||
$('#anim_buttons .btn-group')
|
||||
.append(
|
||||
create_btn(a_count++).click(animHandler(ac[i])),
|
||||
' '
|
||||
);
|
||||
}
|
||||
|
||||
$('#anim_buttons .btn-group').append(
|
||||
create_btn('Bye!').click(function(e){
|
||||
$(e.target).addClass('active');
|
||||
jcrop_api.animateTo(
|
||||
[300,200,300,200],
|
||||
function(){
|
||||
this.release();
|
||||
$(e.target).closest('.btn-group').find('.active').removeClass('active');
|
||||
}
|
||||
);
|
||||
return false;
|
||||
})
|
||||
);
|
||||
|
||||
// Create bgOpacity buttons
|
||||
for(i in bgo) {
|
||||
$('#bgo_buttons .btn-group').append(
|
||||
create_btn(i).click(setoptHandler('bgOpacity',bgo[i])),
|
||||
' '
|
||||
);
|
||||
}
|
||||
// Create bgColor buttons
|
||||
for(i in bgc) {
|
||||
$('#bgc_buttons .btn-group').append(
|
||||
create_btn(i).css({
|
||||
background: bgc[i],
|
||||
color: ((i == 'K') || (i == 'R'))?'white':'black'
|
||||
}).click(setoptHandler('bgColor',bgc[i])), ' '
|
||||
);
|
||||
}
|
||||
// Function to insert named sections into interface
|
||||
function insertSection(k,v) {
|
||||
$('#interface').prepend(
|
||||
$('<fieldset></fieldset>').attr('id',k).append(
|
||||
$('<legend></legend>').append(v),
|
||||
'<div class="btn-toolbar"><div class="btn-group"></div></div>'
|
||||
)
|
||||
);
|
||||
};
|
||||
// Handler for option-setting buttons
|
||||
function setoptHandler(k,v) {
|
||||
return function(e) {
|
||||
$(e.target).closest('.btn-group').find('.active').removeClass('active');
|
||||
$(e.target).addClass('active');
|
||||
var opt = { };
|
||||
opt[k] = v;
|
||||
jcrop_api.setOptions(opt);
|
||||
return false;
|
||||
};
|
||||
};
|
||||
// Handler for animation buttons
|
||||
function animHandler(v) {
|
||||
return function(e) {
|
||||
$(e.target).addClass('active');
|
||||
jcrop_api.animateTo(v,function(){
|
||||
$(e.target).closest('.btn-group').find('.active').removeClass('active');
|
||||
});
|
||||
return false;
|
||||
};
|
||||
};
|
||||
|
||||
$('#bgo_buttons .btn:first,#bgc_buttons .btn:last').addClass('active');
|
||||
$('#interface').show();
|
||||
|
||||
});
|
||||
|
||||
|
||||
</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" />
|
||||
<link rel="stylesheet" href="../css/jquery.Jcrop.extras.css" type="text/css" />
|
||||
|
||||
</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">Animations + Transitions</li>
|
||||
</ul>
|
||||
<h1>Animations + Transitions</h1>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span9">
|
||||
<img src="demo_files/sago.jpg" id="target" alt="Jcrop Image" />
|
||||
|
||||
<div class="description">
|
||||
<p id="shadetxt" style="display:none; color:#900;">
|
||||
<b>Experimental shader active.</b>
|
||||
Jcrop now includes a shading mode that facilitates building
|
||||
better transparent Jcrop instances. The experimental shader is less
|
||||
robust than Jcrop's default shading method and should only be
|
||||
used if you require this functionality.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<b>Animation/Transitions.</b>
|
||||
Demonstration of animateTo API method and transitions for bgColor
|
||||
and bgOpacity options. Color fading requires inclusion of John Resig's
|
||||
jQuery <a href="http://plugins.jquery.com/project/color">Color
|
||||
Animations</a> plugin. If it is not included, colors will not fade.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="span3" id="interface">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" id="fadetog" /> Enable fading (bgFade: true)
|
||||
</label>
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" id="shadetog" /> Use experimental shader (shade: true)
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
268
app/static/global/plugins/jcrop/demos/tutorial5.html
Normal file
@@ -0,0 +1,268 @@
|
||||
<!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>
|
||||
|