I am trying to create a page on my site that uses Jcrop to edit and then save the edited images.
My issue is that when I load the page on Chrome or Microsoft Edge the jcrop-holder is duplicated and the image appears on the browser twice.
I cannot work out what is the issue, any help would be much appreciated!
Bellow is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Aspect Ratio with Preview Pane | Jcrop Demo</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.Jcrop.min.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/heroic-features.css" rel="stylesheet">
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap[enter image description here][1]/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/heroic-features.css" rel="stylesheet">
<style type="text/css">
/* Apply these styles only when #preview-pane has
been placed within the Jcrop widget */
.jcrop-holder #preview-pane {
display: block;
position: absolute;
z-index: 2000;
top: 10px;
right: -280px;
padding: 6px;
border: 1px rgba(0,0,0,.4) solid;
background-color: white;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
}
/* The Javascript code will set the aspect ratio of the crop
area based on the size of the thumbnail preview,
specified here */
#preview-pane .preview-container {
width: 250px;
height: 170px;
overflow: hidden;
}
</style>
<script type="text/javascript">
jQuery(function($){
// Create variables (in this scope) to hold the API and image size
var jcrop_api,
boundx,
boundy,
// Grab some information about the preview pane
$preview = $('#preview-pane'),
$pcnt = $('#preview-pane .preview-container'),
$pimg = $('#preview-pane .preview-container img'),
xsize = $pcnt.width(),
ysize = $pcnt.height();
console.log('init',[xsize,ysize]);
$('#target').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
aspectRatio: xsize / ysize
},function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
// Move the preview into the jcrop container for css positioning
$preview.appendTo(jcrop_api.ui.holder);
});
function updatePreview(c)
{
if (parseInt(c.w) > 0)
{
var rx = xsize / c.w;
var ry = ysize / c.h;
$pimg.css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
};
});
</script>
</head>
<body style="zoom: 1;">
<div class="container">
<div class="row">
<div class="span12">
<div class="jc-demo-box">
<img src="https://fast-listings.com/uploaded_images/5f8abd050dcfa7.90503490.jpg" id="target" style="display: none; visibility: hidden; width: 602px; height: 400px;">
<div class="jcrop-holder" style="width: 602px; height: 400px; position: relative; background-color: black;">
<div style="position: absolute; z-index: 600;">
<div style="width: 100%; height: 100%; z-index: 310; position: absolute; overflow: hidden;">
<img src="https://fast-listings.com/uploaded_images/5f8abd050dcfa7.90503490.jpg" style="border: none; visibility: visible; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; width: 602px; height: 400px;">
<div class="jcrop-hline" style="position: absolute; opacity: 0.4;"> </div>
<div class="jcrop-hline bottom" style="position: absolute; opacity: 0.4;"> </div>
<div class="jcrop-vline right" style="position: absolute; opacity: 0.4;"></div>
<div class="jcrop-vline" style="position: absolute; opacity: 0.4;"></div>
<div class="jcrop-tracker" style="cursor: move; position: absolute; z-index: 360;"></div>
</div>
<div style="width: 100%; height: 100%; z-index: 320; display: none;">
<div class="ord-n jcrop-dragbar" style="cursor: n-resize; position: absolute; z-index: 370;"></div>
<div class="ord-s jcrop-dragbar" style="cursor: s-resize; position: absolute; z-index: 371;"></div>
<div class="ord-e jcrop-dragbar" style="cursor: e-resize; position: absolute; z-index: 372;"></div>
<div class="ord-w jcrop-dragbar" style="cursor: w-resize; position: absolute; z-index: 373;"></div>
<div class="ord-n jcrop-handle" style="cursor: n-resize; position: absolute; z-index: 374; opacity: 0.5;"></div>
<div class="ord-s jcrop-handle" style="cursor: s-resize; position: absolute; z-index: 375; opacity: 0.5;"></div>
<div class="ord-e jcrop-handle" style="cursor: e-resize; position: absolute; z-index: 376; opacity: 0.5;"></div>
<div class="ord-w jcrop-handle" style="cursor: w-resize; position: absolute; z-index: 377; opacity: 0.5;"></div>
<div class="ord-nw jcrop-handle" style="cursor: nw-resize; position: absolute; z-index: 378; opacity: 0.5;"></div>
<div class="ord-ne jcrop-handle" style="cursor: ne-resize; position: absolute; z-index: 379; opacity: 0.5;"></div>
<div class="ord-se jcrop-handle" style="cursor: se-resize; position: absolute; z-index: 380; opacity: 0.5;"></div>
<div class="ord-sw jcrop-handle" style="cursor: sw-resize; position: absolute; z-index: 381; opacity: 0.5;"></div>
</div>
</div>
<div class="jcrop-tracker" style="width: 606px; height: 404px; position: absolute; top: -2px; left: -2px; z-index: 290; cursor: crosshair;"></div>
<input type="radio" class="jcrop-keymgr" style="position: fixed; left: -120px; width: 12px;">
<img src="https://fast-listings.com/uploaded_images/5f8abd050dcfa7.90503490.jpg" alt="\[Jcrop Example\]" style="display: block; visibility: visible; width: 602px; height: 400px; border: none; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px;">
<div id="preview-pane">
<div class="preview-container">
<img src="https://fast-listings.com/uploaded_images/5f8abd050dcfa7.90503490.jpg" class="jcrop-preview" alt="Preview" style="width: 34113px; height: 22667px; margin-left: -32130px; margin-top: -12013px;">
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</body>
Seems the job of adding jcrop-holder div is performed by the JQuery code in the <script> part.
Since inside of your body tag, there is already a jcrop-holder div available, you are having the div twice when the page loading finishes. i.e. the JQuery part does what it should do. So, here is the solution I have come up with after debugging for some time:
<body style="zoom: 1;">
<div class="container">
<div class="row">
<div class="span12">
<div class="jc-demo-box">
<img src="https://fast-listings.com/uploaded_images/5f8abd050dcfa7.90503490.jpg" id="target" style="display: none; visibility: hidden; width: 602px; height: 400px;">
<div class="jcrop-tracker" style="width: 606px; height: 404px; position: absolute; top: -2px; left: -2px; cursor: crosshair;"></div>
<input type="radio" class="jcrop-keymgr" style="position: fixed; left: -120px; width: 12px;">
<div id="preview-pane">
<div class="preview-container">
<img src="https://fast-listings.com/uploaded_images/5f8abd050dcfa7.90503490.jpg" class="jcrop-preview" alt="Preview" style="width: 34113px; height: 22667px; margin-left: -32130px; margin-top: -12013px;">
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</body>
Just replace everything in the body and it should be working as expected.