- 1.gif (65.18 KiB) Viewed 1283 times
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html lang="en">
<head>
<title>Live Cropping Demo</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<script src="../../../styles/prosilver/theme/crop/jquery.min.js"></script>
<script src="../../../styles/prosilver/theme/crop/jquery.Jcrop.js"></script>
<link rel="stylesheet" href="../../../styles/prosilver/theme/crop/main.css" type="text/css" />
<link rel="stylesheet" href="../../../styles/prosilver/theme/crop/demos.css" type="text/css" />
<link rel="stylesheet" href="../../../styles/prosilver/theme/crop/jquery.Jcrop.css" type="text/css" />
<script type="text/javascript">
$(function(){
$('#cropbox').Jcrop({
aspectRatio: 1,
onSelect: updateCoords
});
});
function updateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
function checkCoords()
{
if (parseInt($('#w').val())) return true;
alert('Please select a crop region then press submit.');
return false;
};
</script>
</head>
<body>
<script type="text/javascript">
function show_crop()
{
topic_id = $('#topic_id').val();
// x = $('#x').val(c.x);
// y = $('#y').val(c.y);
// w = $('#w').val(c.w);
// h = $('#h').val(c.h);
$("#topic_id_detail").load('tmbnews.php?mode=ajax_crop&topic_id='+topic_id);
}
</script>
<div class="container">
<div class="jc-demo-box">
<!-- This is the image we're attaching Jcrop to -->
<!-- <img src="../../../pictest/pool.jpg" id="cropbox" />-->
<!-- This is the form that our event handler fills -->
<form action="tmbnews.php?mode=ajax_crop&attach_id={PIC_ID}&topic_id={TOPIC_ID}&p={POST_ID}" method="post" onsubmit="return checkCoords();">
<img src="{ATTACH_ID}" id="cropbox" />
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="hidden" id="type" name="type" value="{TYPE}"/>
<input type="hidden" id="picture" name="picture" value="{ATTACH_ID}"/>
<input type="hidden" id="physical" name="physical" value="{PHYSICAL}"/>
<button onclick="show_crop()">Crop Image</button>
<!-- <input type="submit" value="Crop Image" class="show_crop" />-->
<!-- <input type="submit" value="Crop Image" class="btn btn-large btn-inverse" />-->
</form>
<form action="tmbnews.php?mode=ajax_crop&attach_id={PIC_ID}&topic_id={TOPIC_ID}&p={POST_ID}" method="post" onsubmit="return checkCoords();">
<img src="{ATTACH_ID}" id="cropbox" />
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="hidden" id="type" name="type" value="{TYPE}"/>
<input type="hidden" id="picture" name="picture" value="{ATTACH_ID}"/>
<input type="hidden" id="physical" name="physical" value="{PHYSICAL}"/>
<button onclick="show_crop()">Crop Image</button>
<!-- <input type="submit" value="Crop Image" class="show_crop" />-->
<!-- <input type="submit" value="Crop Image" class="btn btn-large btn-inverse" />-->
</form>
</div>
</div>
</body>
</html>