30 |
31 | 32 | This example demonstrates the default behavior of Jcrop. 33 | Since no event handlers have been attached it only performs 34 | the cropping behavior. 35 |
36 | 37 |44 | 45 | This is an example of attaching Jcrop to a target that is not an image. You are now cropping a paragraph tag. 46 | 47 |
48 | 49 |50 | Attaching Jcrop to a non-image element. 51 | This is mostly useful to implement other interfaces, such as canvas or over an arbitrary div. 52 |
53 | 54 |
51 |
52 |
53 |
67 |
68 | 69 | An example with a basic event handler. Here we've tied 70 | several form values together with a simple event handler invocation. 71 | The result is that the form values are updated in real-time as 72 | the selection is changed using Jcrop's onChange handler. 73 |
74 | 75 |76 | That's how easily Jcrop can be integrated into a traditional web form! 77 |
78 | 79 ||
64 |
65 | |
66 | 67 | 70 | | 71 |
75 | An example implementing a preview pane. 76 | Obviously the most visual demo, the preview pane is accomplished 77 | entirely outside of Jcrop with a simple jQuery-flavored callback. 78 | This type of interface could be useful for creating a thumbnail 79 | or avatar. The onChange event handler is used to update the 80 | view in the preview pane. 81 |
82 | 83 |
80 |
81 |
82 |
89 |
90 | 91 | An example server-side crop script. Hidden form values 92 | are set when a selection is made. If you press the Crop Image 93 | button, the form will be submitted and a 150x150 thumbnail will be 94 | dumped to the browser. Try it! 95 |
96 | 97 |
66 |
67 | 79 | Example styling tricks. Click the buttons above to change the appearance of Jcrop in real-time. 80 |
81 | 82 |79 | This example demonstrates more complex invocations of Jcrop. 80 | These techniques can be integrated with other libraries or more 81 | complex user interfaces. 82 |
83 | 84 |92 | Prior to v0.9.10 release, it was difficult to instantiate Jcrop 93 | on an image unless it was visible on the page. This meant that 94 | opening Jcrop in a dialog or a hidden tab was problematic, and 95 | involved specific timing (e.g. attaching the Jcrop method 96 | call to an "open" handler for the UI element). 97 |
98 |99 | This demo shows simple invocations of Jcrop using jQuery UI. If 100 | you are using a different library to produce dialog boxes or tabs, 101 | the theory of operation should be similar. 102 |
103 | 104 | 105 |
108 | 
147 |
148 |
149 |
150 |
151 |
152 |
159 |
160 | 161 | Animation/Transitions. 162 | Demonstration of animateTo API method and transitions for bgColor 163 | and bgOpacity options. Color fading requires inclusion of John Resig's 164 | jQuery Color 165 | Animations plugin. If it is not included, colors will not fade. 166 |
167 | 168 |
195 |
196 |