Jcrop a jquery plug-in, has anybody used it ?
-
I try to use it. I know how to set up, how to initialize,etc. but I encountered a strange problem. I can't drag the selection of the code of i writed in the html file. In the another html file,I copy code from Jcrop's demo, the drag is ok. the code of I writed and the code of copied are same, I checked several times. And the resize box Of the Crop selection is not display. the "Jcrop.css" is referenced right. Very strange. Why? Here is the code:
<HTML> <HEAD> <TITLE> New Document </TITLE> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.Jcrop.js"></script> <link type="text/css" href="css/jquery.Jcrop.css" /> <script type="text/javascript"> jQuery(window).load(function() { var api = $.Jcrop('#cropbox', { onChange: showPreview, onSelect: showPreview, setSelect: [0, 0, 120, 120], aspectRatio: 1 }); api.setOptions({ minSize: [40, 40], maxSize: [120, 120] }); }); function showPreview(coords) { if (parseInt(coords.w) > 0) { var rx = 100 / coords.w; var ry = 100 / coords.h; var realHeight = $("#cropbox").attr("height"); jQuery('#preview').css({ width: Math.round(rx * 500) + 'px', height: Math.round(ry * realHeight) + 'px', marginLeft: '-' + Math.round(rx * coords.x) + 'px', marginTop: '-' + Math.round(ry * coords.y) + 'px' }); } } function initCut(){ //var api = $.Jcrop('#cropbox',{ //onChange: showPreview, //onSelect: showPreview, //init selection //setSelect: [ 0, 0, 120, 120 ], //Rate //aspectRatio: 1 //}); //api.setOptions( {minSize: [ 40, 40], maxSize: [ 120, 120]});alert("begin crop"); //api.setOptions({ allowResize: true }); } </script> </HEAD> <BODY> <input id="btnBegin" type="button" value="Begin Crop" onclick="initCut();"/> <div class="article" style="border:thin #FF0000 solid;"> <div style=" float:left; border:thin; background-color:#FF0000;"> <img id="cropbox" src="images/jane.jpg" style=" width:500px;" /> </div> <div style= -
I try to use it. I know how to set up, how to initialize,etc. but I encountered a strange problem. I can't drag the selection of the code of i writed in the html file. In the another html file,I copy code from Jcrop's demo, the drag is ok. the code of I writed and the code of copied are same, I checked several times. And the resize box Of the Crop selection is not display. the "Jcrop.css" is referenced right. Very strange. Why? Here is the code:
<HTML> <HEAD> <TITLE> New Document </TITLE> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.Jcrop.js"></script> <link type="text/css" href="css/jquery.Jcrop.css" /> <script type="text/javascript"> jQuery(window).load(function() { var api = $.Jcrop('#cropbox', { onChange: showPreview, onSelect: showPreview, setSelect: [0, 0, 120, 120], aspectRatio: 1 }); api.setOptions({ minSize: [40, 40], maxSize: [120, 120] }); }); function showPreview(coords) { if (parseInt(coords.w) > 0) { var rx = 100 / coords.w; var ry = 100 / coords.h; var realHeight = $("#cropbox").attr("height"); jQuery('#preview').css({ width: Math.round(rx * 500) + 'px', height: Math.round(ry * realHeight) + 'px', marginLeft: '-' + Math.round(rx * coords.x) + 'px', marginTop: '-' + Math.round(ry * coords.y) + 'px' }); } } function initCut(){ //var api = $.Jcrop('#cropbox',{ //onChange: showPreview, //onSelect: showPreview, //init selection //setSelect: [ 0, 0, 120, 120 ], //Rate //aspectRatio: 1 //}); //api.setOptions( {minSize: [ 40, 40], maxSize: [ 120, 120]});alert("begin crop"); //api.setOptions({ allowResize: true }); } </script> </HEAD> <BODY> <input id="btnBegin" type="button" value="Begin Crop" onclick="initCut();"/> <div class="article" style="border:thin #FF0000 solid;"> <div style=" float:left; border:thin; background-color:#FF0000;"> <img id="cropbox" src="images/jane.jpg" style=" width:500px;" /> </div> <div style=Following code works for me. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> <script type="text/javascript" src="jquery-1.4.2.js" > </script> <script type="text/javascript" src="jquery.Jcrop.min.js"></script> <link href="jquery.Jcrop.css" type="text/css" /> <link href="demos.css" type="text/css" /> </head> <body> <div id="outer"> <div class="jcExample"> <div class="article"> <h1>Jcrop - Aspect ratio lock w/ preview pane</h1> <!-- This is the image we're attaching Jcrop to --> <table> <tr> <td> <img src="Water_lilies.jpg" id="cropbox" /> </td> <td> <div style="width:100px;height:100px;overflow:hidden;"> <img src="Water_lilies.jpg" id="preview" /> </div> </td> </tr> </table> </div> </div> </div> </body> <script type="text/javascript"> // Remember to invoke within jQuery(window).load(...) // If you don't, Jcrop may not initialize properly //alert("hi"); jQuery(window).load(function(){ jQuery('#cropbox').Jcrop({ onChange: showPreview, onSelect: showPreview, aspectRatio: 1 }); }); // Our simple event handler, called from onChange and onSelect // event handlers, as per the Jcrop invocation above function showPreview(coords) { if (parseInt(coords.w) > 0) { var rx = 100 / coords.w; var ry = 100 / coords.h; jQuery('#preview').css({ width: Math.round(rx * 500) + 'px', height: Math.round(ry * 370) + 'px', marginLeft: '-' + Math.round(rx * coords.x) + 'px', marginTop: '-' + Math.round(ry * coords.y) + 'px' }); } } </script> </html> I had followed your instruction and do some modification. Hope this will help!
Jinal Desai