-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
115 lines (92 loc) · 3.79 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>How to Create a jQuery Image Cropping Plug-In from Scratch - Demo for Part II</title>
<link href="style.css" media="screen" rel="stylesheet" type="text/css" />
<link href="resources/js/imageCrop/jquery.imagecrop.css" media="screen" rel="stylesheet" type="text/css" />
<script src="resources/js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="resources/js/imageCrop/jquery.imagecrop.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('img#example').imageCrop({
displayPreview : true,
displaySize : true,
overlayOpacity : 0.25,
onSelect : updateForm
});
});
var selectionExists;
// Update form inputs
function updateForm(crop) {
$('input#x').val(crop.selectionX);
$('input#y').val(crop.selectionY);
$('input#width').val(crop.selectionWidth);
$('input#height').val(crop.selectionHeight);
selectionExists = crop.selectionExists();
};
// Validate form data
function validateForm() {
if (selectionExists)
return true;
alert('Please make a selection first!');
return false;
};
</script>
</head>
<body>
<div id="wrapper">
<h1>How to Create a jQuery Image Cropping Plug-In from Scratch</h1>
<a href="http://nettuts.com/" id="back">« Return to Nettuts+</a>
<div class="spacer">
<!-- -->
</div><!-- .spacer -->
<div class="image-decorator">
<img alt="How to Create a jQuery Image Cropping Plug-In from Scratch" height="360" id="example" src="resources/images/example.jpg" width="480" />
</div><!-- .image-decorator -->
<div class="info">
<h2>Demo for Part II</h2>
<p>
This is what you should achieve after following the second part of the tutorial. The source code of this example can be downloaded here:
<br /><br />
<a href="../downloads/imagecrop-part-2.zip" id="download">Get the Code</a> (79.9 KB)
</p>
<div class="spacer">
<!-- -->
</div><!-- .spacer -->
<h2>Try it</h2>
<p>
Make a selection and click the "Crop Image" button to see the result. Attention! This example requires PHP/gd support to work.
<br /><br />
<form action="crop.php" method="post" onsubmit="return validateForm();">
<input id="x" name="x" type="hidden" />
<input id="y" name="y" type="hidden" />
<input id="width" name="width" type="hidden" />
<input id="height" name="height" type="hidden" />
<input type="submit" value="Crop Image" />
</form>
</p>
<div class="spacer">
<!-- -->
</div><!-- .spacer -->
<h2>Return to Nettuts+</h2>
<p>
You can go back to the tutorial by following the next links:
<br /><br />
<a href="http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-jquery-image-cropping-plugin-from-scratch-part-i/">How to Create a jQuery Image Cropping Plug-In from Scratch - Part I</a>
<br />
<a href="http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-jquery-image-cropping-plugin-from-scratch-part-ii/">How to Create a jQuery Image Cropping Plug-In from Scratch - Part II</a>
</p>
<div class="spacer">
<!-- -->
</div><!-- .spacer -->
<p id ="author">
Author: <a href="http://swarm.cs.pub.ro/~cdogaru/">Cãtãlin Dogaru</a>
</p>
</div><!-- .info -->
<div class="clear">
<!-- -->
</div><!-- .clear -->
</div><!-- #wrapper -->
</body>
</html>