Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 1 | <!DOCTYPE html> |
| 2 | <html lang="en"> |
||
| 3 | <head> |
||
| 4 | <title>API Demo | Jcrop Demo</title> |
||
| 5 | <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> |
||
| 6 | |||
| 7 | <script src="../js/jquery.min.js"></script> |
||
| 8 | <script src="../js/jquery.Jcrop.js"></script> |
||
| 9 | <script type="text/javascript"> |
||
| 10 | jQuery(function($){ |
||
| 11 | |||
| 12 | // The variable jcrop_api will hold a reference to the |
||
| 13 | // Jcrop API once Jcrop is instantiated. |
||
| 14 | var jcrop_api; |
||
| 15 | |||
| 16 | // In this example, since Jcrop may be attached or detached |
||
| 17 | // at the whim of the user, I've wrapped the call into a function |
||
| 18 | initJcrop(); |
||
| 19 | |||
| 20 | // The function is pretty simple |
||
| 21 | function initJcrop()//{{{ |
||
| 22 | { |
||
| 23 | // Hide any interface elements that require Jcrop |
||
| 24 | // (This is for the local user interface portion.) |
||
| 25 | $('.requiresjcrop').hide(); |
||
| 26 | |||
| 27 | // Invoke Jcrop in typical fashion |
||
| 28 | $('#target').Jcrop({ |
||
| 29 | onRelease: releaseCheck |
||
| 30 | },function(){ |
||
| 31 | |||
| 32 | jcrop_api = this; |
||
| 33 | jcrop_api.animateTo([100,100,400,300]); |
||
| 34 | |||
| 35 | // Setup and dipslay the interface for "enabled" |
||
| 36 | $('#can_click,#can_move,#can_size').attr('checked','checked'); |
||
| 37 | $('#ar_lock,#size_lock,#bg_swap').attr('checked',false); |
||
| 38 | $('.requiresjcrop').show(); |
||
| 39 | |||
| 40 | }); |
||
| 41 | |||
| 42 | }; |
||
| 43 | //}}} |
||
| 44 | |||
| 45 | // Use the API to find cropping dimensions |
||
| 46 | // Then generate a random selection |
||
| 47 | // This function is used by setSelect and animateTo buttons |
||
| 48 | // Mainly for demonstration purposes |
||
| 49 | function getRandom() { |
||
| 50 | var dim = jcrop_api.getBounds(); |
||
| 51 | return [ |
||
| 52 | Math.round(Math.random() * dim[0]), |
||
| 53 | Math.round(Math.random() * dim[1]), |
||
| 54 | Math.round(Math.random() * dim[0]), |
||
| 55 | Math.round(Math.random() * dim[1]) |
||
| 56 | ]; |
||
| 57 | }; |
||
| 58 | |||
| 59 | // This function is bound to the onRelease handler... |
||
| 60 | // In certain circumstances (such as if you set minSize |
||
| 61 | // and aspectRatio together), you can inadvertently lose |
||
| 62 | // the selection. This callback re-enables creating selections |
||
| 63 | // in such a case. Although the need to do this is based on a |
||
| 64 | // buggy behavior, it's recommended that you in some way trap |
||
| 65 | // the onRelease callback if you use allowSelect: false |
||
| 66 | function releaseCheck() |
||
| 67 | { |
||
| 68 | jcrop_api.setOptions({ allowSelect: true }); |
||
| 69 | $('#can_click').attr('checked',false); |
||
| 70 | }; |
||
| 71 | |||
| 72 | // Attach interface buttons |
||
| 73 | // This may appear to be a lot of code but it's simple stuff |
||
| 74 | $('#setSelect').click(function(e) { |
||
| 75 | // Sets a random selection |
||
| 76 | jcrop_api.setSelect(getRandom()); |
||
| 77 | }); |
||
| 78 | $('#animateTo').click(function(e) { |
||
| 79 | // Animates to a random selection |
||
| 80 | jcrop_api.animateTo(getRandom()); |
||
| 81 | }); |
||
| 82 | $('#release').click(function(e) { |
||
| 83 | // Release method clears the selection |
||
| 84 | jcrop_api.release(); |
||
| 85 | }); |
||
| 86 | $('#disable').click(function(e) { |
||
| 87 | // Disable Jcrop instance |
||
| 88 | jcrop_api.disable(); |
||
| 89 | // Update the interface to reflect disabled state |
||
| 90 | $('#enable').show(); |
||
| 91 | $('.requiresjcrop').hide(); |
||
| 92 | }); |
||
| 93 | $('#enable').click(function(e) { |
||
| 94 | // Re-enable Jcrop instance |
||
| 95 | jcrop_api.enable(); |
||
| 96 | // Update the interface to reflect enabled state |
||
| 97 | $('#enable').hide(); |
||
| 98 | $('.requiresjcrop').show(); |
||
| 99 | }); |
||
| 100 | $('#rehook').click(function(e) { |
||
| 101 | // This button is visible when Jcrop has been destroyed |
||
| 102 | // It performs the re-attachment and updates the UI |
||
| 103 | $('#rehook,#enable').hide(); |
||
| 104 | initJcrop(); |
||
| 105 | $('#unhook,.requiresjcrop').show(); |
||
| 106 | return false; |
||
| 107 | }); |
||
| 108 | $('#unhook').click(function(e) { |
||
| 109 | // Destroy Jcrop widget, restore original state |
||
| 110 | jcrop_api.destroy(); |
||
| 111 | // Update the interface to reflect un-attached state |
||
| 112 | $('#unhook,#enable,.requiresjcrop').hide(); |
||
| 113 | $('#rehook').show(); |
||
| 114 | return false; |
||
| 115 | }); |
||
| 116 | |||
| 117 | // Hook up the three image-swapping buttons |
||
| 118 | $('#img1').click(function(e) { |
||
| 119 | $(this).addClass('active').closest('.btn-group') |
||
| 120 | .find('button.active').not(this).removeClass('active'); |
||
| 121 | |||
| 122 | jcrop_api.setImage('demo_files/sago.jpg'); |
||
| 123 | jcrop_api.setOptions({ bgOpacity: .6 }); |
||
| 124 | return false; |
||
| 125 | }); |
||
| 126 | $('#img2').click(function(e) { |
||
| 127 | $(this).addClass('active').closest('.btn-group') |
||
| 128 | .find('button.active').not(this).removeClass('active'); |
||
| 129 | |||
| 130 | jcrop_api.setImage('demo_files/pool.jpg'); |
||
| 131 | jcrop_api.setOptions({ bgOpacity: .6 }); |
||
| 132 | return false; |
||
| 133 | }); |
||
| 134 | $('#img3').click(function(e) { |
||
| 135 | $(this).addClass('active').closest('.btn-group') |
||
| 136 | .find('button.active').not(this).removeClass('active'); |
||
| 137 | |||
| 138 | jcrop_api.setImage('demo_files/sago.jpg',function(){ |
||
| 139 | this.setOptions({ |
||
| 140 | bgOpacity: 1, |
||
| 141 | outerImage: 'demo_files/sagomod.jpg' |
||
| 142 | }); |
||
| 143 | this.animateTo(getRandom()); |
||
| 144 | }); |
||
| 145 | return false; |
||
| 146 | }); |
||
| 147 | |||
| 148 | // The checkboxes simply set options based on it's checked value |
||
| 149 | // Options are changed by passing a new options object |
||
| 150 | |||
| 151 | // Also, to prevent strange behavior, they are initially checked |
||
| 152 | // This matches the default initial state of Jcrop |
||
| 153 | |||
| 154 | $('#can_click').change(function(e) { |
||
| 155 | jcrop_api.setOptions({ allowSelect: !!this.checked }); |
||
| 156 | jcrop_api.focus(); |
||
| 157 | }); |
||
| 158 | $('#can_move').change(function(e) { |
||
| 159 | jcrop_api.setOptions({ allowMove: !!this.checked }); |
||
| 160 | jcrop_api.focus(); |
||
| 161 | }); |
||
| 162 | $('#can_size').change(function(e) { |
||
| 163 | jcrop_api.setOptions({ allowResize: !!this.checked }); |
||
| 164 | jcrop_api.focus(); |
||
| 165 | }); |
||
| 166 | $('#ar_lock').change(function(e) { |
||
| 167 | jcrop_api.setOptions(this.checked? |
||
| 168 | { aspectRatio: 4/3 }: { aspectRatio: 0 }); |
||
| 169 | jcrop_api.focus(); |
||
| 170 | }); |
||
| 171 | $('#size_lock').change(function(e) { |
||
| 172 | jcrop_api.setOptions(this.checked? { |
||
| 173 | minSize: [ 80, 80 ], |
||
| 174 | maxSize: [ 350, 350 ] |
||
| 175 | }: { |
||
| 176 | minSize: [ 0, 0 ], |
||
| 177 | maxSize: [ 0, 0 ] |
||
| 178 | }); |
||
| 179 | jcrop_api.focus(); |
||
| 180 | }); |
||
| 181 | |||
| 182 | }); |
||
| 183 | |||
| 184 | |||
| 185 | </script> |
||
| 186 | <link rel="stylesheet" href="demo_files/main.css" type="text/css" /> |
||
| 187 | <link rel="stylesheet" href="demo_files/demos.css" type="text/css" /> |
||
| 188 | <link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" /> |
||
| 189 | <style type="text/css"> |
||
| 190 | .optdual { position: relative; } |
||
| 191 | .optdual .offset { position: absolute; left: 18em; } |
||
| 192 | .optlist label { width: 16em; display: block; } |
||
| 193 | #dl_links { margin-top: .5em; } |
||
| 194 | |||
| 195 | </style> |
||
| 196 | |||
| 197 | </head> |
||
| 198 | <body> |
||
| 199 | |||
| 200 | <div class="container"> |
||
| 201 | <div class="row"> |
||
| 202 | <div class="span12"> |
||
| 203 | <div class="jc-demo-box"> |
||
| 204 | |||
| 205 | <div class="page-header"> |
||
| 206 | <ul class="breadcrumb first"> |
||
| 207 | <li><a href="../index.html">Jcrop</a> <span class="divider">/</span></li> |
||
| 208 | <li><a href="../index.html">Demos</a> <span class="divider">/</span></li> |
||
| 209 | <li class="active">API Demo</li> |
||
| 210 | </ul> |
||
| 211 | <h1>API Demo</h1> |
||
| 212 | </div> |
||
| 213 | |||
| 214 | <img src="demo_files/sago.jpg" id="target" alt="[Jcrop Example]" /> |
||
| 215 | |||
| 216 | <div style="margin: .8em 0 .5em;"> |
||
| 217 | <span class="requiresjcrop"> |
||
| 218 | <button id="setSelect" class="btn btn-mini">setSelect</button> |
||
| 219 | <button id="animateTo" class="btn btn-mini">animateTo</button> |
||
| 220 | <button id="release" class="btn btn-mini">Release</button> |
||
| 221 | <button id="disable" class="btn btn-mini">Disable</button> |
||
| 222 | </span> |
||
| 223 | <button id="enable" class="btn btn-mini" style="display:none;">Re-Enable</button> |
||
| 224 | <button id="unhook" class="btn btn-mini">Destroy!</button> |
||
| 225 | <button id="rehook" class="btn btn-mini" style="display:none;">Attach Jcrop</button> |
||
| 226 | </div> |
||
| 227 | |||
| 228 | <fieldset class="optdual requiresjcrop"> |
||
| 229 | <legend>Option Toggles</legend> |
||
| 230 | <div class="optlist offset"> |
||
| 231 | <label><input type="checkbox" id="ar_lock" />Aspect ratio</label> |
||
| 232 | <label><input type="checkbox" id="size_lock" />minSize/maxSize setting</label> |
||
| 233 | </div> |
||
| 234 | <div class="optlist"> |
||
| 235 | <label><input type="checkbox" id="can_click" />Allow new selections</label> |
||
| 236 | <label><input type="checkbox" id="can_move" />Selection can be moved</label> |
||
| 237 | <label><input type="checkbox" id="can_size" />Resizable selection</label> |
||
| 238 | </div> |
||
| 239 | </fieldset> |
||
| 240 | |||
| 241 | <fieldset class="requiresjcrop" style="margin: .5em 0;"> |
||
| 242 | <legend>Change Image</legend> |
||
| 243 | <div class="btn-group"> |
||
| 244 | <button class="btn" id="img2">Pool</button> |
||
| 245 | <button class="btn active" id="img1">Sago</button> |
||
| 246 | <button class="btn" id="img3">Sago w/ outerImage</button> |
||
| 247 | </div> |
||
| 248 | </fieldset> |
||
| 249 | |||
| 250 | |||
| 251 | |||
| 252 | <div class="tapmodo-footer"> |
||
| 253 | <a href="http://tapmodo.com" class="tapmodo-logo segment">tapmodo.com</a> |
||
| 254 | <div class="segment"><b>© 2008-2013 Tapmodo Interactive LLC</b><br /> |
||
| 255 | Jcrop is free software released under <a href="../MIT-LICENSE.txt">MIT License</a> |
||
| 256 | </div> |
||
| 257 | </div> |
||
| 258 | |||
| 259 | <div class="clearfix"></div> |
||
| 260 | |||
| 261 | </div> |
||
| 262 | </div> |
||
| 263 | </div> |
||
| 264 | </div> |
||
| 265 | |||
| 266 | </body> |
||
| 267 | </html> |
||
| 268 |