123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>Non-image Cropping | Jcrop Demo</title>
- <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
- <script src="../js/jquery.min.js"></script>
- <script src="../js/jquery.Jcrop.js"></script>
- <script type="text/javascript">
- jQuery(function($){
- // I did JSON.stringify(jcrop_api.tellSelect()) on a crop I liked:
- var c = {"x":13,"y":7,"x2":487,"y2":107,"w":474,"h":100};
- $('#target').Jcrop({
- bgFade: true,
- setSelect: [c.x,c.y,c.x2,c.y2]
- });
- });
- </script>
- <link rel="stylesheet" href="demo_files/main.css" type="text/css" />
- <link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
- <link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
- <style type="text/css">
- #target {
- background-color: #ccc;
- width: 500px;
- height: 330px;
- font-size: 24px;
- display: block;
- }
- </style>
- </head>
- <body>
- <div class="container">
- <div class="row">
- <div class="span12">
- <div class="jc-demo-box">
- <div class="page-header">
- <ul class="breadcrumb first">
- <li><a href="../index.html">Jcrop</a> <span class="divider">/</span></li>
- <li><a href="../index.html">Demos</a> <span class="divider">/</span></li>
- <li class="active">Non-image Cropping</li>
- </ul>
- <h1>Non-image Cropping</h1>
- </div>
- <p id="target">
- <b style="display:block; padding: .5em 1em;">
- This is an example of attaching Jcrop to a target that is not an image. You are now cropping a paragraph tag.
- </b>
- </p>
- <p>
- <h4>Attaching Jcrop to a non-image element.</h4>
- This is mostly useful to implement other interfaces, such as <tt>canvas</tt> or over an arbitrary <tt>div</tt>.
- </p>
- <div class="tapmodo-footer">
- <a href="http://tapmodo.com" class="tapmodo-logo segment">tapmodo.com</a>
- <div class="segment"><b>© 2008-2013 Tapmodo Interactive LLC</b><br />
- Jcrop is free software released under <a href="../MIT-LICENSE.txt">MIT License</a>
- </div>
- </div>
- <div class="clearfix"></div>
- </div>
- </div>
- </div>
- </div>
- </body>
- </html>
|