Initial commit

This commit is contained in:
Khanh Ngo
2015-12-13 16:34:12 +07:00
commit 2dac8205f6
3113 changed files with 514935 additions and 0 deletions

View 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>

View 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;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 141 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 236 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 174 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 245 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 243 KiB

File diff suppressed because it is too large Load Diff

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 77 KiB

View 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>&copy; 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>

View 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>&copy; 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>

View 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>&copy; 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>

View 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>&copy; 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>

View 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>&copy; 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>

View 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>&copy; 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>

View 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>&copy; 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>