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
