js2/mwEmbed/libClipEdit/Jcrop/demos/tutorial4.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
   9                 <script language="Javascript">
  10
  11                         $(window).load(function(){
  12
  13                                 var api = $.Jcrop('#cropbox',{
  14                                         setSelect: [ 100, 100, 200, 200 ]
  15                                 });
  16                                 var i, ac;
  17
  18                                 // A handler to kill the action
  19                                 function nothing(e)
  20                                 {
  21                                         e.stopPropagation();
  22                                         e.preventDefault();
  23                                         return false;
  24                                 };
  25
  26                                 // Returns event handler for animation callback
  27                                 function anim_handler(ac)
  28                                 {
  29                                         return function(e) {
  30                                                 api.animateTo(ac);
  31                                                 return nothing(e);
  32                                         };
  33                                 };
  34
  35                                 // Setup some coordinates for animation
  36                                 var ac =
  37                                 {
  38                                         anim1: [50,50,450,320],
  39                                         anim2: [74,81,218,228],
  40                                         anim3: [8,8,32,360],
  41                                         anim4: [316,150,470,230],
  42                                         anim5: [80,160,500,190]
  43                                 };
  44
  45                                 // Attach respective event handlers
  46                                 for(i in ac) jQuery('#'+i).click(anim_handler(ac[i]));
  47
  48                                 // Attach another one manually, to demonstrate "set" w/o animation
  49                                 jQuery('#setsel').click(function(e) {
  50                                         api.setSelect( [ 200, 200, 300, 300 ] );
  51                                         return nothing(e);
  52                                 });
  53
  54                         });
  55
  56                 </script>
  57
  58         </head>
  59
  60         <body>
  61                 <div id="outer">
  62                 <div class="jcExample">
  63                 <div class="article">
  64
  65                         <h1>Jcrop - API Demo</h1>
  66                         <img src="demo_files/flowers.jpg" id="cropbox" />
  67
  68                         <div style="margin: 20px 0;">
  69                                 <button id="anim1">A1</button>
  70                                 <button id="anim2">A2</button>
  71                                 <button id="anim3">A3</button>
  72                                 <button id="anim4">A4</button>
  73                                 <button id="anim5">A5</button>
  74                                 <button id="setsel">Set</button>
  75                         </div>
  76
  77                         <p>
  78                                 <b>API feature demonstration.</b>
  79                                 Press the buttons above to animate different selections.
  80                                 This was the original API demo, before additional API functionality
  81                                 was added (see Advanced API demo).
  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                 </div>
  90                 </div>
  91                 </div>
  92         </body>
  93 </html>
  94