Jcrop change parent div for thumbnail preview

Question

I'm using Jcrop plugin for cropping a picture with preview thumbnail. Jcrop plugin creates preview image with inside jcrop-active div. So how it will be possible to change preview div layer inside other div?

Working example on https://jsfiddle.net/cuwfpo45/

Here HTML:

<div id="form-photo" class="form-photo clearfix">  
<div class="form-group">
  <img src="<?php echo $image; ?>" id="target" />
</div>
<form id="" class="s-form" method="POST" action="test3.php" onsubmit="return checkCoords();">
  <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" name="image" value="<?php echo $image; ?>" />
  <input type="submit" value="Submit" />
</form>

Here my JS code:

$(function(){
    var box_width = $('#form-photo').width();

    $('#target').Jcrop({
        setSelect: [ 100, 100, 500, 500 ],
        aspectRatio: 1,
        onSelect: updateCoords,
        onChange: updateCoords,
        boxWidth: box_width
    },function(){
        var jcrop_api = this;
        thumbnail = this.initComponent('Thumbnailer', { width: 330, height: 320 });
    });
});

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;
}; 

Thank you for helping!

Answer 1

Edit: I have made required adjustment to show preview in a separate div.

$(function(){
    var box_width = $('#form-photo').width();
    var $preview = $('#preview');

    $('#target').Jcrop({
		onChange: showPreview,
		onSelect: showPreview,
    onRelease: hidePreview,
		aspectRatio: 1
	});
  
  
  function hidePreview()
{
    $preview.stop().fadeOut('fast');
};

function showPreview(c)
{
    $('#x').val(c.x);
    $('#y').val(c.y);
    $('#w').val(c.w);
    $('#h').val(c.h);
    
    var rx = 100 / c.w;
	var ry = 100 / c.h;
    
    $('#preview').css({
		width: Math.round(rx * 500) + 'px',
		height: Math.round(ry * 370) + 'px',
		marginLeft: '-' + Math.round(rx * c.x) + 'px',
		marginTop: '-' + Math.round(ry * c.y) + 'px'
	});
};
  
});

#form-photo{width:500px;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/2.0.4/css/Jcrop.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/2.0.4/js/Jcrop.min.js"></script>

<div style="width:100px;height:100px;overflow:hidden;margin-left:5px;">
	<img src="http://jcrop-cdn.tapmodo.com/v0.9.10/demos/demo_files/pool.jpg" id="preview" />
</div>


<div id="form-photo" class="form-photo clearfix">  
    <div class="form-group">
      <img src="http://jcrop-cdn.tapmodo.com/v0.9.10/demos/demo_files/pool.jpg" id="target" />
    </div>
    <form id="" class="s-form" method="POST" action="act/test3.php" onsubmit="return checkCoords();">
      <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" name="image" value="<?php echo $image; ?>" />
      <input type="submit" value="Submit" />
    </form>
</div>