Jcrop
Példa
Deklaráció
$(document).ready(function(){ var api = $.Jcrop('#cropbox', { onSelect: showCoords, onChange: showCoords }); $('#enable, #active').hide(); // paraméterek kijelzése function showCoords (c){ $('#x1').val(c.x); $('#y1').val(c.y); $('#x2').val(c.x2); $('#y2').val(c.y2); $('#width').val(c.w); $('#height').val(c.h); } // kezdeti kijelölés $('#setSelect').click( function(e){ api.setSelect([250, 133, 450, 333]); } ) // animáció 1 $('#anim1').click( function(e){ api.animateTo([0, 0, 200, 200]); } ) // animáció 2 $('#anim2').click( function(e){ api.animateTo([500, 266, 700, 466]); } ) // kijelölés megszüntetése $('#release').click( function(){ api.release() } ) // Jcrop letiltása $('#disable').click( function(){ api.disable(); $(this).hide(); $('#enable').show(); } ) // Jcrop engedélyezése $('#enable').click( function(){ api.enable(); $(this).hide(); $('#disable').show(); } ) // Jcrop megszüntetése $('#destroy').click( function(){ api.destroy(); $('#disable, #enable, #setSelect, #anim1, #anim2, #release').hide(); $(this).hide(); $('#active').show(); } ) // Jcrop aktiválása $('#active').click( function(){ $('#disable, #setSelect, #anim1, #anim2, #release, #destroy').show(); $(this).hide(); api = $.Jcrop('#cropbox'); } ) });
HTML kód
<p><img src="images/img1.jpg" id="cropbox" width="700" height="466" alt=""/></p> <form action="#" onsubmit="return false;"> <label for="x1">X1:</label><input type="text" id="x1" name="x1" value="" /> <label for="x1">Y1:</label><input type="text" id="y1" name="y1" value="" /> <label for="x2">X2:</label><input type="text" id="x2" name="x2" value="" /> <label for="y2">Y2:</label><input type="text" id="y2" name="y2" value="" /> <label for="height">Magasság:</label><input type="text" id="height" name="height" value="" /> <label for="width">Szélesség:</label><input type="text" id="width" name="width" value="" /> <input type="button" id="setSelect" name="setSelect" value="setSelect()" /> <input type="button" id="anim1" name="setSelect" value="Animáció 1" /> <input type="button" id="anim2" name="setSelect" value="Animáció 2" /> <input type="button" id="release" name="release" value="release()" /> <input type="button" id="disable" name="disable" value="disable" /> <input type="button" id="enable" name="enable" value="enable" /> <input type="button" id="destroy" name="destroy" value="destroy" /> <input type="button" id="active" name="active" value="Aktivál" /> </form>