non-image.html 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Non-image Cropping | Jcrop Demo</title>
  5. <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
  6. <script src="../js/jquery.min.js"></script>
  7. <script src="../js/jquery.Jcrop.js"></script>
  8. <script type="text/javascript">
  9. jQuery(function($){
  10. // I did JSON.stringify(jcrop_api.tellSelect()) on a crop I liked:
  11. var c = {"x":13,"y":7,"x2":487,"y2":107,"w":474,"h":100};
  12. $('#target').Jcrop({
  13. bgFade: true,
  14. setSelect: [c.x,c.y,c.x2,c.y2]
  15. });
  16. });
  17. </script>
  18. <link rel="stylesheet" href="demo_files/main.css" type="text/css" />
  19. <link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
  20. <link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
  21. <style type="text/css">
  22. #target {
  23. background-color: #ccc;
  24. width: 500px;
  25. height: 330px;
  26. font-size: 24px;
  27. display: block;
  28. }
  29. </style>
  30. </head>
  31. <body>
  32. <div class="container">
  33. <div class="row">
  34. <div class="span12">
  35. <div class="jc-demo-box">
  36. <div class="page-header">
  37. <ul class="breadcrumb first">
  38. <li><a href="../index.html">Jcrop</a> <span class="divider">/</span></li>
  39. <li><a href="../index.html">Demos</a> <span class="divider">/</span></li>
  40. <li class="active">Non-image Cropping</li>
  41. </ul>
  42. <h1>Non-image Cropping</h1>
  43. </div>
  44. <p id="target">
  45. <b style="display:block; padding: .5em 1em;">
  46. This is an example of attaching Jcrop to a target that is not an image. You are now cropping a paragraph tag.
  47. </b>
  48. </p>
  49. <p>
  50. <h4>Attaching Jcrop to a non-image element.</h4>
  51. This is mostly useful to implement other interfaces, such as <tt>canvas</tt> or over an arbitrary <tt>div</tt>.
  52. </p>
  53. <div class="tapmodo-footer">
  54. <a href="http://tapmodo.com" class="tapmodo-logo segment">tapmodo.com</a>
  55. <div class="segment"><b>&copy; 2008-2013 Tapmodo Interactive LLC</b><br />
  56. Jcrop is free software released under <a href="../MIT-LICENSE.txt">MIT License</a>
  57. </div>
  58. </div>
  59. <div class="clearfix"></div>
  60. </div>
  61. </div>
  62. </div>
  63. </div>
  64. </body>
  65. </html>