diff options
Diffstat (limited to 'view')
| -rwxr-xr-x | view/tpl/cropbody.tpl | 43 | ||||
| -rwxr-xr-x | view/tpl/cropcover.tpl | 42 | ||||
| -rwxr-xr-x | view/tpl/crophead.tpl | 7 |
3 files changed, 36 insertions, 56 deletions
diff --git a/view/tpl/cropbody.tpl b/view/tpl/cropbody.tpl index 01d9a24a0..d35546ec6 100755 --- a/view/tpl/cropbody.tpl +++ b/view/tpl/cropbody.tpl @@ -6,36 +6,27 @@ <img src="{{$image_url}}" id="croppa" class="imgCrop" alt="{{$title}}" /> </div> <div id="cropimage-preview-wrapper" > -<div id="previewWrap" ></div> +<div id="previewWrap" class="crop-preview" style="height: 300px; width: 300px; max-width: 300px; max-height: 300px; overflow: hidden;"></div> </div> <script type="text/javascript" language="javascript"> - function onEndCrop( coords, dimensions ) { - $( 'x1' ).value = coords.x1; - $( 'y1' ).value = coords.y1; - $( 'x2' ).value = coords.x2; - $( 'y2' ).value = coords.y2; - $( 'width' ).value = dimensions.width; - $( 'height' ).value = dimensions.height; - } - - Event.observe( window, 'load', function() { - new Cropper.ImgWithPreview( - 'croppa', - { - previewWrap: 'previewWrap', - minWidth: 300, - minHeight: 300, - maxWidth: 1024, - maxHeight: 1024, - ratioDim: { x: 100, y:100 }, - displayOnInit: true, - onEndCrop: onEndCrop - } - ); - } - ); + +var image = document.getElementById('croppa'); +var cropper = new Cropper(image, { + aspectRatio: 1 / 1, + viewMode: 1, + preview: '.crop-preview', + crop: function(e) { + $( 'x1' ).value = e.detail.x; + $( 'y1' ).value = e.detail.y; + $( 'x2' ).value = e.detail.x + e.detail.width; + $( 'y2' ).value = e.detail.y + e.detail.height; + $( 'width' ).value = e.detail.scaleX; + $( 'height' ).value = e.detail.scaleY; + + } +}); </script> diff --git a/view/tpl/cropcover.tpl b/view/tpl/cropcover.tpl index 04b96a603..8888a967a 100755 --- a/view/tpl/cropcover.tpl +++ b/view/tpl/cropcover.tpl @@ -6,36 +6,26 @@ <img src="{{$image_url}}" id="croppa" class="imgCrop" alt="{{$title}}" /> </div> <div id="cropimage-preview-wrapper" > -<div id="previewWrap" ></div> +<div id="previewWrap" class="crop-preview" style="width: 320px; height: 116px; max-width: 320px; max-height: 116px; overflow: hidden"></div> </div> <script type="text/javascript" language="javascript"> - function onEndCrop( coords, dimensions ) { - $( 'x1' ).value = coords.x1; - $( 'y1' ).value = coords.y1; - $( 'x2' ).value = coords.x2; - $( 'y2' ).value = coords.y2; - $( 'width' ).value = dimensions.width; - $( 'height' ).value = dimensions.height; - } - - Event.observe( window, 'load', function() { - new Cropper.ImgWithPreview( - 'croppa', - { - previewWrap: 'previewWrap', - minWidth: 240, - minHeight: 87, - maxWidth: 320, - maxHeight: 116, - ratioDim: { x: 100, y:36 }, - displayOnInit: true, - onEndCrop: onEndCrop - } - ); - } - ); +var image = document.getElementById('croppa'); +var cropper = new Cropper(image, { + aspectRatio: 2.75 / 1, + viewMode: 1, + preview: '.crop-preview', + crop: function(e) { + $( 'x1' ).value = e.detail.x; + $( 'y1' ).value = e.detail.y; + $( 'x2' ).value = e.detail.x + e.detail.width; + $( 'y2' ).value = e.detail.y + e.detail.height; + $( 'width' ).value = e.detail.scaleX; + $( 'height' ).value = e.detail.scaleY; + + } +}); </script> diff --git a/view/tpl/crophead.tpl b/view/tpl/crophead.tpl index 48f375426..a5a80c187 100755 --- a/view/tpl/crophead.tpl +++ b/view/tpl/crophead.tpl @@ -1,4 +1,3 @@ - <script type="text/javascript" src="library/cropper/lib/prototype.js" language="javascript"></script> - <script type="text/javascript" src="library/cropper/lib/scriptaculous.js?load=effects,builder,dragdrop" language="javascript"></script> - <script type="text/javascript" src="library/cropper/cropper.js" language="javascript"></script> - <link rel="stylesheet" href="library/cropper/cropper.css" type="text/css" /> +<script type="text/javascript" src="library/cropperjs/dist/cropper.js" language="javascript"></script> +<link rel="stylesheet" href="library/cropperjs/dist/cropper.css" type="text/css" /> + |