除了 Internet Explorer (IE) 之外，Jcrop 在所有 Web 浏览器上都可以与 fancybox 配合使用。裁剪工具似乎不可移动。有什么解决办法吗？谢谢。
花式盒代码：
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.3"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.2" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '90%',
height : '90%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
afterClose : function() {
location.reload();
return;
}
});
});
</script>
<style type="text/css">
.fancybox-custom .fancybox-skin {
box-shadow: 0 0 50px #222;
}
</style>
<!-- -->
HTML/PHP 代码：
"<td align='center'><a class='various' data-fancybox-type='iframe' href='see-instalaciones.php?id=$record[id]'>[Actualizar]</a></td>".
完整的crop.php代码：
<?php
$pageis = $_GET['pageis'];
$first = $_GET['first'];
$second = $_GET['second'];
$third = $_GET['third'];
// db class stuff
require("../../db/config.inc.php");
require("../../db/Database.class.php");
$folder = '../../images/instalaciones/';
$filename = $_GET['filename'];
//$orig_w = 500;
//$orig_h = $_GET['height'];
$orig_w = 600;
$orig_h = $_GET['height'];
$targ_w = 241;
$targ_h = 320;
$ratio = $targ_w / $targ_h;
if( isset($_POST['submit']))
{
$src = imagecreatefromjpeg($folder.$filename);
$tmp = imagecreatetruecolor($targ_w, $targ_h);
imagecopyresampled($tmp, $src, 0,0,$_POST['x'],$_POST['y'],$targ_w,$targ_h,$_POST['w'],$_POST['h']);
imagejpeg($tmp, $folder.'lg_'.$filename,100);
imagedestroy($tmp);
//imagedestroy($src);
//echo "<p><a href='index.php'>Back</a></p>";
//echo "<h1>Saved Lg image</h1><img src=\"$folder/lg_$filename\"/>";
// get thumb image
/*
$targ_w = 115;
$targ_h = 83;
$tmp1=imagecreatetruecolor($targ_w,$targ_h);
imagecopyresampled($tmp1, $src, 0,0,$_POST['x'],$_POST['y'],$targ_w,$targ_h,$_POST['w'],$_POST['h']);
imagejpeg($tmp1,$folder.'th_'.$filename,100);
imagedestroy($tmp);*/
imagedestroy($src);
$iddb = $_GET["iddb"];
$filenamedb = $_GET["filenamedb"];
if ($filenamedb != $filename) {
$db = new Database(DB_SERVER, DB_USER, DB_PASS, DB_DATABASE);
// connect to the server
$db->connect();
$data['filename'] = $filename;
$db->query_update(TABLE_INSTA_GAL, $data, "id=$iddb");
$db->close();
// delete images
$filenamedb_lg = "../../images/instalaciones/lg_$filenamedb";
$filenamedb_th = "../../images/instalaciones/th_$filenamedb";
$filenamedb = "../../images/instalaciones/$filenamedb";
//imagedestroy($filenamedb);
unlink($filenamedb_lg);
unlink($filenamedb_th);
unlink($filenamedb);
//echo $filenamedb;
}
else {
//echo ">>>>>>>> filename SAMA";
}
header("Location: crop-thumb.php?filename=$filename&height=$orig_h");
//echo "<p><h3>Image is updated! <a href='javascript:parent.jQuery.fancybox.close();'>[x] close this window</a></h3></p>";
//exit();
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Using the JQuery JCrop Plugin, and PHP for Image Uploads</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="js/jquery.pack.js"></script>
<script type="text/javascript" src="js/jquery.Jcrop.pack.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
<script type="text/javascript">
$(function(){
$('#cropbox').Jcrop({
boxWidth: 500, boxHeight: 500,
aspectRatio: <?php echo $ratio?>,
setSelect: [0,0,<?php echo $orig_w.','.$orig_h;?>],
onSelect: updateCoords,
onChange: showCoords,
onRelease: clearCoords,
onChange: updateCoords
});
});
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('');
};
function checkCoords()
{
if (parseInt($('#w').val())) return true;
alert('Please select a crop region then press submit.');
return false;
};
function updateCoords(c)
{
//showPreview(c);
$("#x").val(c.x);
$("#y").val(c.y);
$("#w").val(c.w);
$("#h").val(c.h);
}
function showPreview(coords)
{
var rx = <?php echo $targ_w;?> / coords.w;
var ry = <?php echo $targ_h;?> / coords.h;
$("#preview img").css({
width: Math.round(rx*<?php echo $orig_w;?>)+'px',
height: Math.round(ry*<?php echo $orig_h;?>)+'px',
marginLeft:'-'+ Math.round(rx*coords.x)+'px',
marginTop: '-'+ Math.round(ry*coords.y)+'px'
});
}
</script>
</head>
<body>
<h1>Move the selection on image and crop!</h1>
<table>
<tr>
<td>
<img src="<?php echo $folder.$filename?>" id="cropbox" alt="cropbox" />
</td>
<!--<td>
Large img Preview:
<div id="preview">
<img src="<?php echo $folder.$filename?>" alt="thumb" />
</div>
</td>-->
</tr>
</table>
<form action="<?php echo $_SERVER['REQUEST_URI']?>" method="post" onsubmit="return checkCoords();">
<p>
<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" />-->
<label>W <input type="text" size="4" id="w" name="w" /></label>
<label>H <input type="text" size="4" id="h" name="h" /></label>
<input type="submit" id="submit" name="submit" value="Crop Image!" />
</p>
</form>
</body>
</html>