Skip to content
Browse files

Added non-image attachment demo

  • Loading branch information...
1 parent ee094ee commit d4132312e101405955ee00778283c6aab4145516 @tapmodo committed Jan 1, 2012
Showing with 68 additions and 0 deletions.
  1. +64 −0 demos/non-image.html
  2. +4 −0 index.html
View
64 demos/non-image.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
+ <title>Jcrop &raquo; Tutorials &raquo; Non-Image</title>
+ <script src="../js/jquery.min.js" type="text/javascript"></script>
+ <script src="../js/jquery.Jcrop.js" type="text/javascript"></script>
+ <link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
+ <link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
+ <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>
+ <style type="text/css">
+ #target {
+ background-color: #ccc;
+ width: 500px;
+ height: 330px;
+ font-size: 24px;
+ display: block;
+ }
+ </style>
+ </head>
+
+ <body>
+ <div id="outer">
+ <div class="jcExample">
+ <div class="article">
+
+ <h1>Jcrop - Non-Image</h1>
+ <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>
+ <b>Attaching Jcrop to a non-image element.</b>
+ This is mostly useful to implement other interfaces, such as <tt>canvas</tt> or over an arbitrary <tt>div</tt>.
+ </p>
+
+ <div id="dl_links">
+ <a href="http://deepliquid.com/content/Jcrop.html">Jcrop Home</a> |
+ <a href="http://deepliquid.com/content/Jcrop_Manual.html">Manual (Docs)</a>
+ </div>
+
+ </div>
+ </div>
+ </div>
+ </body>
+</html>
+
View
4 index.html
@@ -41,6 +41,10 @@
&mdash; style Jcrop dynamically with CSS
<small>New in 0.9.10</small>
</li>
+ <li><a href="demos/non-image.html">Non-Image Elements</a>
+ &mdash; attach to other DOM block elements
+ <small>New in 0.9.10</small>
+ </li>
</ul>
<h3>Live Demo</h3>

0 comments on commit d413231

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