Skip to content
This repository
Browse code

Added non-image attachment demo

  • Loading branch information...
commit d4132312e101405955ee00778283c6aab4145516 1 parent ee094ee
Kelly Hallman authored

Showing 2 changed files with 68 additions and 0 deletions. Show diff stats Hide diff stats

  1. +64 0 demos/non-image.html
  2. +4 0 index.html
64 demos/non-image.html
... ... @@ -0,0 +1,64 @@
  1 +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2 + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3 +<html xmlns="http://www.w3.org/1999/xhtml">
  4 + <head>
  5 + <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
  6 + <title>Jcrop &raquo; Tutorials &raquo; Non-Image</title>
  7 + <script src="../js/jquery.min.js" type="text/javascript"></script>
  8 + <script src="../js/jquery.Jcrop.js" type="text/javascript"></script>
  9 + <link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
  10 + <link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
  11 + <script type="text/javascript">
  12 +
  13 + jQuery(function($){
  14 +
  15 + // I did JSON.stringify(jcrop_api.tellSelect()) on a crop I liked:
  16 + var c = {"x":13,"y":7,"x2":487,"y2":107,"w":474,"h":100};
  17 +
  18 + $('#target').Jcrop({
  19 + bgFade: true,
  20 + setSelect: [c.x,c.y,c.x2,c.y2]
  21 + });
  22 +
  23 + });
  24 +
  25 + </script>
  26 + <style type="text/css">
  27 + #target {
  28 + background-color: #ccc;
  29 + width: 500px;
  30 + height: 330px;
  31 + font-size: 24px;
  32 + display: block;
  33 + }
  34 + </style>
  35 + </head>
  36 +
  37 + <body>
  38 + <div id="outer">
  39 + <div class="jcExample">
  40 + <div class="article">
  41 +
  42 + <h1>Jcrop - Non-Image</h1>
  43 + <p id="target">
  44 + <b style="display:block; padding: .5em 1em;">
  45 + This is an example of attaching Jcrop to a target that is not an image. You are now cropping a paragraph tag.
  46 + </b>
  47 + </p>
  48 +
  49 + <p>
  50 + <b>Attaching Jcrop to a non-image element.</b>
  51 + This is mostly useful to implement other interfaces, such as <tt>canvas</tt> or over an arbitrary <tt>div</tt>.
  52 + </p>
  53 +
  54 + <div id="dl_links">
  55 + <a href="http://deepliquid.com/content/Jcrop.html">Jcrop Home</a> |
  56 + <a href="http://deepliquid.com/content/Jcrop_Manual.html">Manual (Docs)</a>
  57 + </div>
  58 +
  59 + </div>
  60 + </div>
  61 + </div>
  62 + </body>
  63 +</html>
  64 +
4 index.html
@@ -41,6 +41,10 @@
41 41 &mdash; style Jcrop dynamically with CSS
42 42 <small>New in 0.9.10</small>
43 43 </li>
  44 + <li><a href="demos/non-image.html">Non-Image Elements</a>
  45 + &mdash; attach to other DOM block elements
  46 + <small>New in 0.9.10</small>
  47 + </li>
44 48 </ul>
45 49
46 50 <h3>Live Demo</h3>

0 comments on commit d413231

Please sign in to comment.
Something went wrong with that request. Please try again.