js2/mwEmbed/libClipEdit/Jcrop/demos/tutorial5.html

   1 <html>
   2         <head>
   3
   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; }
  14                 </style>
  15                 <script language="Javascript">
  16
  17                         $(window).load(function(){
  18
  19                                 var jcrop_api;
  20                                 var i, ac;
  21
  22                                 initJcrop();
  23
  24                                 function initJcrop()//{{{
  25                                 {
  26
  27                                         jcrop_api = $.Jcrop('#cropbox');
  28
  29                                         $('#can_click,#can_move,#can_size')
  30                                                 .attr('checked','checked');
  31
  32                                         $('#ar_lock,#size_lock,#bg_swap').attr('checked',false);
  33
  34                                 };
  35                                 //}}}
  36
  37                                 // A handler to kill the action
  38                                 // Probably not necessary, but I like it
  39                                 function nothing(e)
  40                                 {
  41                                         e.stopPropagation();
  42                                         e.preventDefault();
  43                                         return false;
  44                                 };
  45
  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();
  52                                         return [
  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])
  57                                         ];
  58                                 };
  59
  60                                 // Attach interface buttons
  61                                 // This may appear to be a lot of code but it's simple stuff
  62
  63                                 $('#setSelect').click(function(e) {
  64                                         // Sets a random selection
  65                                         jcrop_api.setSelect(getRandom());
  66                                 });
  67
  68                                 $('#animateTo').click(function(e) {
  69                                         // Animates to a random selection
  70                                         jcrop_api.animateTo(getRandom());
  71                                 });
  72
  73                                 $('#release').click(function(e) {
  74                                         // Release method clears the selection
  75                                         jcrop_api.release();
  76                                 });
  77
  78                                 $('#disable').click(function(e) {
  79                                         jcrop_api.disable();
  80
  81                                         $('#enable').show();
  82                                         $('.requiresjcrop').hide();
  83                                 });
  84
  85                                 $('#enable').click(function(e) {
  86                                         jcrop_api.enable();
  87
  88                                         $('#enable').hide();
  89                                         $('.requiresjcrop').show();
  90                                 });
  91
  92                                 $('#rehook').click(function(e) {
  93                                         initJcrop();
  94                                         $('#rehook,#enable').hide();
  95                                         $('#unhook,.requiresjcrop').show();
  96                                         return nothing(e);
  97                                 });
  98
  99                                 $('#unhook').click(function(e) {
 100                                         jcrop_api.destroy();
 101
 102                                         $('#unhook,#enable,.requiresjcrop').hide();
 103                                         $('#rehook').show();
 104                                         return nothing(e);
 105                                 });
 106
 107                                 // The checkboxes simply set options based on it's checked value
 108                                 // Options are changed by passing a new options object
 109
 110                                 // Also, to prevent strange behavior, they are initially checked
 111                                 // This matches the default initial state of Jcrop
 112
 113                                 $('#can_click').change(function(e) {
 114                                         jcrop_api.setOptions({ allowSelect: !!this.checked });
 115                                         jcrop_api.focus();
 116                                 });
 117
 118                                 $('#can_move').change(function(e) {
 119                                         jcrop_api.setOptions({ allowMove: !!this.checked });
 120                                         jcrop_api.focus();
 121                                 });
 122
 123                                 $('#can_size').change(function(e) {
 124                                         jcrop_api.setOptions({ allowResize: !!this.checked });
 125                                         jcrop_api.focus();
 126                                 });
 127
 128                                 $('#ar_lock').change(function(e) {
 129                                         jcrop_api.setOptions(this.checked? { aspectRatio: 4/3 }: { aspectRatio: 0 });
 130                                         jcrop_api.focus();
 131                                 });
 132                                 $('#size_lock').change(function(e) {
 133                                         jcrop_api.setOptions(this.checked? {
 134                                                 minSize: [ 80, 80 ],
 135                                                 maxSize: [ 350, 350 ]
 136                                         }: {
 137                                                 minSize: [ 0, 0 ],
 138                                                 maxSize: [ 0, 0 ]
 139                                         });
 140                                         jcrop_api.focus();
 141                                 });
 142                                 $('#bg_swap').change(function(e) {
 143                                         jcrop_api.setOptions( this.checked? {
 144                                                 outerImage: 'demo_files/sagomod.png',
 145                                                 bgOpacity: 1
 146                                         }: {
 147                                                 outerImage: 'demo_files/sago.jpg',
 148                                                 bgOpacity: .6
 149                                         });
 150                                         jcrop_api.release();
 151                                 });
 152
 153                         });
 154
 155                 </script>
 156
 157         </head>
 158
 159         <body>
 160                 <div id="outer">
 161                 <div class="jcExample">
 162                 <div class="article">
 163
 164                         <h1>Jcrop - API Demo</h1>
 165                         <img src="demo_files/sago.jpg" id="cropbox" />
 166
 167                         <div style="margin: 20px 0;">
 168
 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>
 174                                 </span>
 175
 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>
 179
 180                         </div>
 181
 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>
 188                                 </div>
 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>
 193                                 </div>
 194                         </fieldset>
 195
 196                 <div id="dl_links">
 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>
 199                 </div>
 200
 201                 </div>
 202                 </div>
 203                 </div>
 204         </body>
 205 </html>
 206