FM / demos

/home/desid573/book.familycab.com.au/pdd/app/webroot/admin/plugins/jcrop/demos/

/home/desid573/book.familycab.com.au/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/book.familycab.com.au/pdd/app/webroot/admin/plugins/jcrop/demos/tutorial3.html (4081B)

<!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" />

// 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>
<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" />
<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>

</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">Aspect Ratio with Preview Pane</li>
</ul>
<h1>Aspect Ratio with Preview Pane</h1>
</div>

<div class="description">
  <p>
    <b>An example implementing a preview pane.</b>
      Obviously the most visual demo, the preview pane is accomplished
      entirely outside of Jcrop with a simple jQuery-flavored callback.
      This type of interface could be useful for creating a thumbnail
      or avatar. The onChange event handler is used to update the
      view in the preview pane.
  </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>

Aspect Ratio with Preview Pane | Jcrop Demo

An example implementing a preview pane. Obviously the most visual demo, the preview pane is accomplished entirely outside of Jcrop with a simple jQuery-flavored callback. This type of interface could be useful for creating a thumbnail or avatar. The onChange event handler is used to update the view in the preview pane.