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 $(window
).load(function(){
13 var api
= $.Jcrop('#cropbox',{
14 setSelect
: [ 100, 100, 200, 200 ]
18 // A handler to kill the action
26 // Returns event handler for animation callback
27 function anim_handler(ac
)
35 // Setup some coordinates for animation
38 anim1
: [50,50,450,320],
39 anim2
: [74,81,218,228],
41 anim4
: [316,150,470,230],
42 anim5
: [80,160,500,190]
45 // Attach respective event handlers
46 for(i
in ac
) jQuery('#'+i
).click(anim_handler(ac
[i
]));
48 // Attach another one manually, to demonstrate "set" w/o animation
49 jQuery('#setsel').click(function(e
) {
50 api
.setSelect( [ 200, 200, 300, 300 ] );
62 <div class=
"jcExample">
65 <h1>Jcrop - API Demo
</h1>
66 <img src=
"demo_files/flowers.jpg" id=
"cropbox" />
68 <div style=
"margin: 20px 0;">
69 <button id=
"anim1">A1
</button>
70 <button id=
"anim2">A2
</button>
71 <button id=
"anim3">A3
</button>
72 <button id=
"anim4">A4
</button>
73 <button id=
"anim5">A5
</button>
74 <button id=
"setsel">Set
</button>
78 <b>API feature demonstration.
</b>
79 Press the buttons above to animate different selections.
80 This was the original API demo, before additional API functionality
81 was added (see Advanced API demo).
85 <a href=
"http://deepliquid.com/content/Jcrop.html">Jcrop Home
</a> |
86 <a href=
"http://deepliquid.com/content/Jcrop_Manual.html">Manual (Docs)
</a>