js2/mwEmbed/libClipEdit/Jcrop/demos/tutorial3.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                         // Remember to invoke within jQuery(window).load(...)
  12                         // If you don't, Jcrop may not initialize properly
  13                         jQuery(window).load(function(){
  14
  15                                 jQuery('#cropbox').Jcrop({
  16                                         onChange: showPreview,
  17                                         onSelect: showPreview,
  18                                         aspectRatio: 1
  19                                 });
  20
  21                         });
  22
  23                         // Our simple event handler, called from onChange and onSelect
  24                         // event handlers, as per the Jcrop invocation above
  25                         function showPreview(coords)
  26                         {
  27                                 if (parseInt(coords.w) > 0)
  28                                 {
  29                                         var rx = 100 / coords.w;
  30                                         var ry = 100 / coords.h;
  31
  32                                         jQuery('#preview').css({
  33                                                 width: Math.round(rx * 500) + 'px',
  34                                                 height: Math.round(ry * 370) + 'px',
  35                                                 marginLeft: '-' + Math.round(rx * coords.x) + 'px',
  36                                                 marginTop: '-' + Math.round(ry * coords.y) + 'px'
  37                                         });
  38                                 }
  39                         }
  40
  41                 </script>
  42
  43         </head>
  44
  45         <body>
  46
  47         <div id="outer">
  48         <div class="jcExample">
  49         <div class="article">
  50
  51                 <h1>Jcrop - Aspect ratio lock w/ preview pane</h1>
  52
  53                 <!-- This is the image we're attaching Jcrop to -->
  54                 <table>
  55                 <tr>
  56                 <td>
  57                 <img src="demo_files/flowers.jpg" id="cropbox" />
  58                 </td>
  59                 <td>
  60                 <div style="width:100px;height:100px;overflow:hidden;">
  61                         <img src="demo_files/flowers.jpg" id="preview" />
  62                 </div>
  63
  64                 </td>
  65                 </tr>
  66                 </table>
  67
  68                 <p>
  69                         <b>An example with aspect ratio locking and preview pane.</b>
  70                         Obviously the most visual demo, the preview pane is accomplished
  71                         entirely outside of Jcrop with a simple jQuery-flavored callback.
  72                         This type of interface could be useful for creating a thumbnail
  73                         or avatar. The onChange event handler is used to update the
  74                         view in the preview pane.
  75                 </p>
  76
  77                 <div id="dl_links">
  78                         <a href="http://deepliquid.com/content/Jcrop.html">Jcrop Home</a> |
  79                         <a href="http://deepliquid.com/content/Jcrop_Manual.html">Manual (Docs)</a>
  80                 </div>
  81
  82
  83         </div>
  84         </div>
  85         </div>
  86         </body>
  87
  88 </html>