{include file='include/colorbox.inc.tpl'} {combine_script id='jquery.jcrop' load='footer' require='jquery' path='plugins/thumbCropper/js/jquery.Jcrop.min.js'} {combine_css path="plugins/thumbCropper/thumbcropper.css"} {footer_script} // Create variables (in this scope) to hold the API and image size var jcrop_api; var ws_data = {ldelim} 'width':{$IMG_WIDTH}, 'height':{$IMG_HEIGHT}, 'ratio': {$IMG_WIDTH}/{$IMG_HEIGHT} {rdelim}; var tc_pwg_token = '{$TC_PWG_TOKEN}'; var img_id={$IMG_ID}; var max_width, max_height; var thumb_data = {ldelim} 'x1': {$thumb_data.x1}, 'y1': {$thumb_data.y1}, 'x2': {$thumb_data.x2}, 'y2': {$thumb_data.y2}, {rdelim}; var ratio; {literal} jQuery(document).ready(function() { jQuery(".cbinline").colorbox({ inline:true, width:"80%", onComplete: function() { $('#target').Jcrop({ setSelect : [thumb_data.x1,thumb_data.y1,thumb_data.x2,thumb_data.y2], boxWidth: 800, boxHeight: 500, onChange: set_thumb_data, onSelect: set_thumb_data, },function(){ $("#websize_image").css("width",$(".jcrop-holder").css("width")); this.setSelect([thumb_data.x1,thumb_data.y1,thumb_data.x2,thumb_data.y2]); // Store the API in the jcrop_api variable jcrop_api = this; }); } }); function update_thumb_size() { max_width = parseInt($("#maxwidth").val()); max_height = parseInt($("#maxheight").val()); var dx = thumb_data.x2-thumb_data.x1; var dy = thumb_data.y2-thumb_data.y1; var nwidth = max_width; var nheight = Math.round(max_width/dx*dy); if (nheight > max_height) { nheight = max_height; nwidth = Math.round(max_height/dy*dx); } thumb_data.width = nwidth; thumb_data.height = nheight; var rx = thumb_data.width / dx; var ry = thumb_data.height / dy; $('#div_preview').css({ width: thumb_data.width, height: thumb_data.height, margin: "0 auto" }); $('#preview_max').css({ width: max_width, height: max_height }); $('#preview').css({ width: Math.round(rx * ws_data.width) + 'px', height: Math.round(ry * ws_data.height) + 'px', marginLeft: '-' + Math.round(rx * thumb_data.x1) + 'px', marginTop: '-' + Math.round(ry * thumb_data.y1) + 'px' }); } function set_thumb_data(c) { thumb_data.x1 = c.x; thumb_data.x2 = c.x2; thumb_data.y1 = c.y; thumb_data.y2 = c.y2; update_thumb_size(); } function max_thub_size_changed() { if ($("select[name=ratio]").val()=='thumb') { max_width = parseInt($("#maxwidth").val()); max_height = parseInt($("#maxheight").val()); jcrop_api.setOptions({'aspectRatio':max_width/max_height}); } update_thumb_size(); } $("#maxwidth").change(max_thub_size_changed); $("#maxheight").change(max_thub_size_changed); $("#center").click(function(e) { var dx = thumb_data.x2 - thumb_data.x1; var dy = thumb_data.y2 - thumb_data.y1; thumb_data.x1 = Math.round((ws_data.width-dx)/2); thumb_data.y1 = Math.round((ws_data.height-dy)/2); thumb_data.x2 = thumb_data.x1+dx; thumb_data.y2 = thumb_data.y1+dy; jcrop_api.setSelect([thumb_data.x1,thumb_data.y1,thumb_data.x2,thumb_data.y2]); update_thumb_size(); }); $("#reset").click(function(e) { thumb_data.x1 = 0; thumb_data.y1 = 0; thumb_data.x2 = ws_data.width; thumb_data.y2 = ws_data.height; jcrop_api.setSelect([thumb_data.x1,thumb_data.y1,thumb_data.x2,thumb_data.y2]); update_thumb_size(); }); $("select[name=ratio]").click(function(e) { switch ($(this).val()) { case "none" : jcrop_api.setOptions({'aspectRatio':0}); break; case "image" : jcrop_api.setOptions({'aspectRatio':ws_data.ratio}); break; case "thumb" : jcrop_api.setOptions({'aspectRatio':max_width/max_height}); break; } }); $("#create").click(function(e) { $.ajax({ type: 'GET', url: 'ws.php', data: { method: "pwg.image.thumbcrop", format: 'json', image_id: img_id, x1: thumb_data.x1, y1: thumb_data.y1, x2: thumb_data.x2, y2: thumb_data.y2, width: thumb_data.width, height: thumb_data.height, pwg_token: tc_pwg_token, }, dataType: 'json', success: ( function(data) { var th = $("img.Thumbnail"); var uri=th.attr('src'); th.attr('src',uri+"?"+(new Date().getTime())); $.colorbox.close(); }), error: ( function(data) { })} ); e.stopPropagation(); return false; }); $("#tc_form").keypress(function(e){ if (e.which == 13) { e.stopPropagation(); return false; } }); }); {/literal} {/footer_script}

{'Thumbnail customization'|@translate}

image
{'Preview'|@translate}
{'Preview'|@translate}
{'Settings'|@translate}

{'Max width'|@translate} : {'px'|@translate}

{'Max height'|@translate} : {'px'|@translate}

{'Thumbnail ratio'|@translate} :