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" />
9 <script language=
"Javascript">
11 // Remember to invoke within jQuery(window).load(...)
12 // If you don't, Jcrop may not initialize properly
13 jQuery(window
).load(function(){
15 jQuery('#cropbox').Jcrop({
16 onChange
: showPreview
,
17 onSelect
: showPreview
,
23 // Our simple event handler, called from onChange and onSelect
24 // event handlers, as per the Jcrop invocation above
25 function showPreview(coords
)
27 if (parseInt(coords
.w
) > 0)
29 var rx
= 100 / coords
.w
;
30 var ry
= 100 / coords
.h
;
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'
48 <div class=
"jcExample">
51 <h1>Jcrop - Aspect ratio lock w/ preview pane
</h1>
53 <!-- This is the image we're attaching Jcrop to -->
57 <img src=
"demo_files/flowers.jpg" id=
"cropbox" />
60 <div style=
"width:100px;height:100px;overflow:hidden;">
61 <img src=
"demo_files/flowers.jpg" id=
"preview" />
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.
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>