Skip to content

Commit cb9af06

Browse files
tapmodotapmodo
committed
first commit
0 parents  commit cb9af06

18 files changed

+2538
-0
lines changed

‎css/Jcrop.gif

329 Bytes
Loading

‎css/jquery.Jcrop.css

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/* Fixes issue here http://code.google.com/p/jcrop/issues/detail?id=1 */
2+
.jcrop-holder { text-align: left; }
3+
4+
.jcrop-vline, .jcrop-hline
5+
{
6+
font-size: 0;
7+
position: absolute;
8+
background: white url('Jcrop.gif') top left repeat;
9+
}
10+
.jcrop-vline { height: 100%; width: 1px !important; }
11+
.jcrop-hline { width: 100%; height: 1px !important; }
12+
.jcrop-handle {
13+
font-size: 1px;
14+
width: 7px !important;
15+
height: 7px !important;
16+
border: 1px #eee solid;
17+
background-color: #333;
18+
*width: 9px;
19+
*height: 9px;
20+
}
21+
22+
.jcrop-tracker { width: 100%; height: 100%; }
23+
24+
.custom .jcrop-vline,
25+
.custom .jcrop-hline
26+
{
27+
background: yellow;
28+
}
29+
.custom .jcrop-handle
30+
{
31+
border-color: black;
32+
background-color: #C7BB00;
33+
-moz-border-radius: 3px;
34+
-webkit-border-radius: 3px;
35+
}

‎demos/crop.php

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<?php
2+
3+
/**
4+
* Jcrop image cropping plugin for jQuery
5+
* Example cropping script
6+
* @copyright 2008-2009 Kelly Hallman
7+
* More info: http://deepliquid.com/content/Jcrop_Implementation_Theory.html
8+
*/
9+
10+
if ($_SERVER['REQUEST_METHOD'] == 'POST')
11+
{
12+
$targ_w = $targ_h = 150;
13+
$jpeg_quality = 90;
14+
15+
$src = 'demo_files/flowers.jpg';
16+
$img_r = imagecreatefromjpeg($src);
17+
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
18+
19+
imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
20+
$targ_w,$targ_h,$_POST['w'],$_POST['h']);
21+
22+
header('Content-type: image/jpeg');
23+
imagejpeg($dst_r,null,$jpeg_quality);
24+
25+
exit;
26+
}
27+
28+
// If not a POST request, display page below:
29+
30+
?><html>
31+
<head>
32+
33+
<script src="../js/jquery.min.js"></script>
34+
<script src="../js/jquery.Jcrop.js"></script>
35+
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
36+
<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
37+
38+
<script language="Javascript">
39+
40+
$(function(){
41+
42+
$('#cropbox').Jcrop({
43+
aspectRatio: 1,
44+
onSelect: updateCoords
45+
});
46+
47+
});
48+
49+
function updateCoords(c)
50+
{
51+
$('#x').val(c.x);
52+
$('#y').val(c.y);
53+
$('#w').val(c.w);
54+
$('#h').val(c.h);
55+
};
56+
57+
function checkCoords()
58+
{
59+
if (parseInt($('#w').val())) return true;
60+
alert('Please select a crop region then press submit.');
61+
return false;
62+
};
63+
64+
</script>
65+
66+
</head>
67+
68+
<body>
69+
70+
<div id="outer">
71+
<div class="jcExample">
72+
<div class="article">
73+
74+
<h1>Jcrop - Crop Behavior</h1>
75+
76+
<!-- This is the image we're attaching Jcrop to -->
77+
<img src="demo_files/flowers.jpg" id="cropbox" />
78+
79+
<!-- This is the form that our event handler fills -->
80+
<form action="crop.php" method="post" onsubmit="return checkCoords();">
81+
<input type="hidden" id="x" name="x" />
82+
<input type="hidden" id="y" name="y" />
83+
<input type="hidden" id="w" name="w" />
84+
<input type="hidden" id="h" name="h" />
85+
<input type="submit" value="Crop Image" />
86+
</form>
87+
88+
<p>
89+
<b>An example server-side crop script.</b> Hidden form values
90+
are set when a selection is made. If you press the <i>Crop Image</i>
91+
button, the form will be submitted and a 150x150 thumbnail will be
92+
dumped to the browser. Try it!
93+
</p>
94+
95+
<div id="dl_links">
96+
<a href="http://deepliquid.com/content/Jcrop.html">Jcrop Home</a> |
97+
<a href="http://deepliquid.com/content/Jcrop_Manual.html">Manual (Docs)</a>
98+
</div>
99+
100+
101+
</div>
102+
</div>
103+
</div>
104+
</body>
105+
106+
</html>

‎demos/demo_files/demos.css

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
body
2+
{
3+
margin: 0;
4+
padding: 0;
5+
background: #eee;
6+
font-family: Calibri, sans-serif;
7+
}
8+
9+
.article h1
10+
{
11+
color: #333;
12+
font-size: 2.2em;
13+
margin-top: .2em;
14+
}
15+
16+
.jcropper-holder { border: 1px black solid; }
17+
18+
#outer { text-align: center; }
19+
20+
.jcExample
21+
{
22+
text-align: left;
23+
background: white;
24+
width: 700px;
25+
font-size: 80%;
26+
margin: 1.5em auto 2em auto;
27+
border: 1px #999 solid;
28+
padding: 1em 2em 2em;
29+
}
30+
31+
.jcExample .article { width: 565px; }
32+
33+
form { margin: 1.5em 0; }
34+
form.coords label { margin-right: 1em; font-weight: bold; color: #900; }
35+
form.coords input { width: 3em; }
36+

‎demos/demo_files/flowers.jpg

44.7 KB
Loading

‎demos/demo_files/sago.jpg

18.4 KB
Loading

‎demos/demo_files/sagomod.jpg

15.9 KB
Loading

‎demos/demo_files/sagomod.png

76.6 KB
Loading

‎demos/tutorial1.html

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
5+
<title>Jcrop &raquo; Tutorials &raquo; Hello World</title>
6+
<script src="../js/jquery.min.js"></script>
7+
<script src="../js/jquery.Jcrop.js"></script>
8+
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
9+
<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
10+
<script type="text/javascript">
11+
12+
jQuery(function(){
13+
jQuery('#cropbox').Jcrop({
14+
trackDocument: true
15+
});
16+
});
17+
18+
</script>
19+
</head>
20+
21+
<body>
22+
<div id="outer">
23+
<div class="jcExample">
24+
<div class="article">
25+
26+
<h1>Jcrop - Hello World</h1>
27+
<img src="demo_files/flowers.jpg" id="cropbox" />
28+
29+
<p>
30+
<b>This example is provided as a demo of the default behavior of Jcrop.</b>
31+
Since no event handlers have been attached it only performs
32+
the cropping behavior.
33+
</p>
34+
35+
<div id="dl_links">
36+
<a href="http://deepliquid.com/content/Jcrop.html">Jcrop Home</a> |
37+
<a href="http://deepliquid.com/content/Jcrop_Manual.html">Manual (Docs)</a>
38+
</div>
39+
40+
</div>
41+
</div>
42+
</div>
43+
</body>
44+
</html>
45+

‎demos/tutorial2.html

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
5+
<title>Jcrop &raquo; Tutorials &raquo; Event Handler</title>
6+
<script src="../js/jquery.min.js"></script>
7+
<script src="../js/jquery.Jcrop.js"></script>
8+
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
9+
<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
10+
<script type="text/javascript">
11+
12+
jQuery(document).ready(function(){
13+
14+
jQuery('#cropbox').Jcrop({
15+
onChange: showCoords,
16+
onSelect: showCoords
17+
});
18+
19+
});
20+
21+
// Simple event handler, called from onChange and onSelect
22+
// event handlers, as per the Jcrop invocation above
23+
function showCoords(c)
24+
{
25+
jQuery('#x1').val(c.x);
26+
jQuery('#y1').val(c.y);
27+
jQuery('#x2').val(c.x2);
28+
jQuery('#y2').val(c.y2);
29+
jQuery('#w').val(c.w);
30+
jQuery('#h').val(c.h);
31+
};
32+
33+
</script>
34+
</head>
35+
<body>
36+
<div id="outer">
37+
<div class="jcExample">
38+
<div class="article">
39+
40+
<h1>Jcrop - Event Handlers</h1>
41+
42+
<!-- This is the image we're attaching Jcrop to -->
43+
<img src="demo_files/flowers.jpg" id="cropbox" />
44+
45+
<!-- This is the form that our event handler fills -->
46+
<form onsubmit="return false;" class="coords">
47+
<label>X1 <input type="text" size="4" id="x1" name="x1" /></label>
48+
<label>Y1 <input type="text" size="4" id="y1" name="y1" /></label>
49+
<label>X2 <input type="text" size="4" id="x2" name="x2" /></label>
50+
<label>Y2 <input type="text" size="4" id="y2" name="y2" /></label>
51+
<label>W <input type="text" size="4" id="w" name="w" /></label>
52+
<label>H <input type="text" size="4" id="h" name="h" /></label>
53+
</form>
54+
55+
<p>
56+
<b>An example with a basic event handler.</b> Here we've tied
57+
several form values together with a simple event handler invocation.
58+
The result is that the form values are updated in real-time as
59+
the selection is changed, thanks to Jcrop's <em>onChange</em> event handler.
60+
</p>
61+
62+
<p>
63+
That's how easily Jcrop can be integrated into a traditional web form!
64+
</p>
65+
66+
<div id="dl_links">
67+
<a href="http://deepliquid.com/content/Jcrop.html">Jcrop Home</a> |
68+
<a href="http://deepliquid.com/content/Jcrop_Manual.html">Manual (Docs)</a>
69+
</div>
70+
71+
72+
</div>
73+
</div>
74+
</div>
75+
</body>
76+
77+
</html>

‎demos/tutorial3.html

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
5+
<title>Jcrop &raquo; Tutorials &raquo; aspectRatio w/ Preview</title>
6+
<script src="../js/jquery.min.js"></script>
7+
<script src="../js/jquery.Jcrop.js"></script>
8+
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
9+
<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
10+
<script type="text/javascript">
11+
12+
(function($) {
13+
14+
$(function(){
15+
16+
var jcrop_api;
17+
var bounds, boundx, boundy;
18+
19+
$('#cropbox').Jcrop({
20+
onChange: showPreview,
21+
onSelect: showPreview,
22+
aspectRatio: 1
23+
},function(){
24+
jcrop_api = this;
25+
bounds = jcrop_api.getBounds();
26+
boundx = bounds[0];
27+
boundy = bounds[1];
28+
});
29+
30+
function showPreview(coords)
31+
{
32+
if (parseInt(coords.w) > 0)
33+
{
34+
var rx = 100 / coords.w;
35+
var ry = 100 / coords.h;
36+
37+
$('#preview').css({
38+
width: Math.round(rx * boundx) + 'px',
39+
height: Math.round(ry * boundy) + 'px',
40+
marginLeft: '-' + Math.round(rx * coords.x) + 'px',
41+
marginTop: '-' + Math.round(ry * coords.y) + 'px'
42+
});
43+
}
44+
};
45+
46+
});
47+
48+
}(jQuery));
49+
50+
</script>
51+
52+
</head>
53+
54+
<body>
55+
56+
<div id="outer">
57+
<div class="jcExample">
58+
<div class="article">
59+
60+
<h1>Jcrop - Aspect ratio w/ preview pane</h1>
61+
62+
<table>
63+
<tr>
64+
<td>
65+
<img src="demo_files/flowers.jpg" id="cropbox" />
66+
</td>
67+
<td>
68+
<div style="width:100px;height:100px;overflow:hidden;">
69+
<img src="demo_files/flowers.jpg" id="preview" />
70+
</div>
71+
</td>
72+
</tr>
73+
</table>
74+
75+
<p>
76+
<b>An example implementing a preview pane.</b>
77+
Obviously the most visual demo, the preview pane is accomplished
78+
entirely outside of Jcrop with a simple jQuery-flavored callback.
79+
This type of interface could be useful for creating a thumbnail
80+
or avatar. The onChange event handler is used to update the
81+
view in the preview pane.
82+
</p>
83+
84+
<div id="dl_links">
85+
<a href="http://deepliquid.com/content/Jcrop.html">Jcrop Home</a> |
86+
<a href="http://deepliquid.com/content/Jcrop_Manual.html">Manual (Docs)</a>
87+
</div>
88+
89+
90+
</div>
91+
</div>
92+
</div>
93+
</body>
94+
95+
</html>

0 commit comments

Comments
 (0)