4 <script src=
"../js/jquery.min.js"></script>
5 <script src=
"../js/jquery.Jcrop.js"></script>
6 <link rel=
"stylesheet" href=
"../css/jquery.Jcrop.css" type=
"text/css" />
7 <link rel=
"stylesheet" href=
"demo_files/demos.css" type=
"text/css" />
8 <style type=
"text/css">
9 fieldset
.optdual
{ width: 500px; }
10 .optdual { position: relative
; }
11 .optdual .offset { position: absolute
; left: 18em; }
12 .optlist label { width: 16em; display: block
; }
13 #dl_links { margin-top: .5em; }
15 <script language=
"Javascript">
17 $(window
).load(function(){
24 function initJcrop()//{{{
27 jcrop_api
= $.Jcrop('#cropbox');
29 $('#can_click,#can_move,#can_size')
30 .attr('checked','checked');
32 $('#ar_lock,#size_lock,#bg_swap').attr('checked',false);
37 // A handler to kill the action
38 // Probably not necessary, but I like it
46 // Use the API to find cropping dimensions
47 // Then generate a random selection
48 // This function is used by setSelect and animateTo buttons
49 // Mainly for demonstration purposes
50 function getRandom() {
51 var dim
= jcrop_api
.getBounds();
53 Math
.round(Math
.random() * dim
[0]),
54 Math
.round(Math
.random() * dim
[1]),
55 Math
.round(Math
.random() * dim
[0]),
56 Math
.round(Math
.random() * dim
[1])
60 // Attach interface buttons
61 // This may appear to be a lot of code but it's simple stuff
63 $('#setSelect').click(function(e
) {
64 // Sets a random selection
65 jcrop_api
.setSelect(getRandom());
68 $('#animateTo').click(function(e
) {
69 // Animates to a random selection
70 jcrop_api
.animateTo(getRandom());
73 $('#release').click(function(e
) {
74 // Release method clears the selection
78 $('#disable').click(function(e
) {
82 $('.requiresjcrop').hide();
85 $('#enable').click(function(e
) {
89 $('.requiresjcrop').show();
92 $('#rehook').click(function(e
) {
94 $('#rehook,#enable').hide();
95 $('#unhook,.requiresjcrop').show();
99 $('#unhook').click(function(e
) {
102 $('#unhook,#enable,.requiresjcrop').hide();
107 // The checkboxes simply set options based on it's checked value
108 // Options are changed by passing a new options object
110 // Also, to prevent strange behavior, they are initially checked
111 // This matches the default initial state of Jcrop
113 $('#can_click').change(function(e
) {
114 jcrop_api
.setOptions({ allowSelect
: !!this.checked
});
118 $('#can_move').change(function(e
) {
119 jcrop_api
.setOptions({ allowMove
: !!this.checked
});
123 $('#can_size').change(function(e
) {
124 jcrop_api
.setOptions({ allowResize
: !!this.checked
});
128 $('#ar_lock').change(function(e
) {
129 jcrop_api
.setOptions(this.checked
? { aspectRatio
: 4/3 }: { aspectRatio
: 0 });
132 $('#size_lock').change(function(e
) {
133 jcrop_api
.setOptions(this.checked
? {
135 maxSize
: [ 350, 350 ]
142 $('#bg_swap').change(function(e
) {
143 jcrop_api
.setOptions( this.checked
? {
144 outerImage
: 'demo_files/sagomod.png',
147 outerImage
: 'demo_files/sago.jpg',
161 <div class=
"jcExample">
162 <div class=
"article">
164 <h1>Jcrop - API Demo
</h1>
165 <img src=
"demo_files/sago.jpg" id=
"cropbox" />
167 <div style=
"margin: 20px 0;">
169 <span class=
"requiresjcrop">
170 <button id=
"setSelect">setSelect
</button>
171 <button id=
"animateTo">animateTo
</button>
172 <button id=
"release">Release
</button>
173 <button id=
"disable">Disable
</button>
176 <button id=
"enable" style=
"display:none;">Re-Enable
</button>
177 <button id=
"unhook">Destroy!
</button>
178 <button id=
"rehook" style=
"display:none;">Attach Jcrop
</button>
182 <fieldset class=
"optdual requiresjcrop">
183 <legend>Option Toggles
</legend>
184 <div class=
"optlist offset">
185 <label><input type=
"checkbox" id=
"ar_lock" />Aspect ratio
</label>
186 <label><input type=
"checkbox" id=
"size_lock" />minSize/maxSize setting
</label>
187 <label><input type=
"checkbox" id=
"bg_swap" />Change outerImage
</label>
189 <div class=
"optlist">
190 <label><input type=
"checkbox" id=
"can_click" />Allow new selections
</label>
191 <label><input type=
"checkbox" id=
"can_move" />Selection can be moved
</label>
192 <label><input type=
"checkbox" id=
"can_size" />Resizable selection
</label>
197 <a href=
"http://deepliquid.com/content/Jcrop.html">Jcrop Home
</a> |
198 <a href=
"http://deepliquid.com/content/Jcrop_Manual.html">Manual (Docs)
</a>