FM / demos

/home/desid573/public_html/family/pdd/app/webroot/admin/plugins/jcrop/demos/

/home/desid573/public_html/family/pdd/app/webroot/admin/plugins/jcrop/demos

Name	Size	Mode	Actions
demo_files/	-	0755	rm
crop.php	2940	0644	edit dl rm
non-image.html	2067	0644	edit dl rm
styling.html	3268	0644	edit dl rm
tutorial1.html	1618	0644	edit dl rm
tutorial2.html	3238	0644	edit dl rm
tutorial3.html	4081	0644	edit dl rm
tutorial4.html	6189	0644	edit dl rm
tutorial5.html	8587	0644	edit dl rm

Edit: /home/desid573/public_html/family/pdd/app/webroot/admin/plugins/jcrop/demos/tutorial2.html (3238B)

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Basic Handler | Jcrop Demo</title>
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />

jQuery(function($){

var jcrop_api;

$('#target').Jcrop({
      onChange:   showCoords,
      onSelect:   showCoords,
      onRelease:  clearCoords
    },function(){
      jcrop_api = this;
    });

$('#coords').on('change','input',function(e){
      var x1 = $('#x1').val(),
          x2 = $('#x2').val(),
          y1 = $('#y1').val(),
          y2 = $('#y2').val();
      jcrop_api.setSelect([x1,y1,x2,y2]);
    });

});

// Simple event handler, called from onChange and onSelect
  // event handlers, as per the Jcrop invocation above
  function showCoords(c)
  {
    $('#x1').val(c.x);
    $('#y1').val(c.y);
    $('#x2').val(c.x2);
    $('#y2').val(c.y2);
    $('#w').val(c.w);
    $('#h').val(c.h);
  };

function clearCoords()
  {
    $('#coords input').val('');
  };

</script>
<link rel="stylesheet" href="demo_files/main.css" type="text/css" />
<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />

</head>
<body>

<div class="page-header">
<ul class="breadcrumb first">
  <li><a href="../index.html">Jcrop</a> <span class="divider">/</span></li>
  <li><a href="../index.html">Demos</a> <span class="divider">/</span></li>
  <li class="active">Basic Handler</li>
</ul>
<h1>Basic Handler</h1>
</div>

<img src="demo_files/sago.jpg" id="target" alt="[Jcrop Example]" />

<form id="coords"
    class="coords"
    onsubmit="return false;"
    action="http://example.com/post.php">

<div class="description">
  <p>
    <b>An example with a basic event handler.</b> Here we've tied
    several form values together with a simple event handler invocation.
    The result is that the form values are updated in real-time as
    the selection is changed using Jcrop's <em>onChange</em> handler.
  </p>

<p>
    That's how easily Jcrop can be integrated into a traditional web form!
  </p>
  </div>

<div class="tapmodo-footer">
  <a href="http://tapmodo.com" class="tapmodo-logo segment">tapmodo.com</a>
  <div class="segment"><b>&copy; 2008-2013 Tapmodo Interactive LLC</b><br />
    Jcrop is free software released under <a href="../MIT-LICENSE.txt">MIT License</a>
  </div>
</div>

</div>
</div>
</div>
</div>

</body>
</html>

Basic Handler | Jcrop Demo

An example with a basic event handler. Here we've tied several form values together with a simple event handler invocation. The result is that the form values are updated in real-time as the selection is changed using Jcrop's onChange handler.

That's how easily Jcrop can be integrated into a traditional web form!