This demo shows the use of some styling techniques as well as other parameters to control the presentation. It also starts with an initial selection to immediately display the new style.
<script language="Javascript">
$(function() {
$('#jcrop_target').Jcrop({
setSelect: [ 20, 130, 480, 230 ],
addClass: 'custom',
bgColor: 'yellow',
bgOpacity: .8,
sideHandles: false
});
});
</script>
Custom CSS:
.custom .jcrop-vline, .custom .jcrop-hline {
background: yellow;
}
.custom .jcrop-handle {
border-color: black;
background-color: #C7BB00;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
These demos have been adapted for this website. Simplified versions of the same demos (with simplified source code) are included in the archive download.