Resizable - aspectRatio
Resizable - aspectRatio
Does anyone know how this option works? I've tried true, 1.3 and
'preserve' but it doesn't seem to lock the resizing to aspect ratio.
I've used various versions out of the SVN but can't get it to work.
$(document).ready(function() {
$('#resizeme_containment_div').resizable({
containment: $('#resizeme_containment_div_wrapper'),
//proxy: 'proxy',
//ghost: true,
//animate:true,
handles: 'all',
knobHandles: true,
//transparent: true,
aspectRatio: true,
autohide: false,
minWidth: 320,
minHeight: 240,
resize: function(e, ui) {
this.style.backgroundPosition = '-' + (ui.instance.position.left)
+ 'px -' + (ui.instance.position.top) + 'px';
$('#top').val(ui.instance.position.top + 'px');
$('#left').val(ui.instance.position.left + 'px');
$('#height').val(ui.instance.size.height + 'px');
$('#width').val(ui.instance.size.width + 'px');
},
stop: function(e, ui) {
this.style.backgroundPosition = '-' + (ui.instance.position.left)
+ 'px -' + (ui.instance.position.top) + 'px';
}
})
.draggable({
cursor: 'move',
containment: $('#resizeme_containment_div_wrapper'),
drag: function(e, ui) {
this.style.backgroundPosition = '-' + (ui.position.left) + 'px -'
+ (ui.position.top) + 'px';
$('#top').val(ui.instance.position.top + 'px');
$('#left').val(ui.instance.position.left + 'px');
}
});
$('#resizeme_containment_wrap_image').css({ opacity: 0.5 });
$('#height').html($('#resizeme_containment_div').height() + 'px');
$('#width').html($('#resizeme_containment_div').width() + 'px');
$('<img>').attr('src', '/im/resizer/{/literal}{$image.filename}
{literal}/').attr('id', 'test').css({ position: 'absolute', top:
'-1000px', left: '-1000px' }).appendTo('body');
$('#test').load(function() {
size = [$('#test').width(), $('#test').height()];
var half = size[0] / 2;
$('#modalContainer').css( { width: size[0], height: size[1],
marginLeft: -half, left: '50%', top: '1%', backgroundColor: '#fff',
border: '3px solid #ccc' } );
$('#resizeme_containment_div').css('background', 'transparent url(/
im/resizer/{/literal}{$image.filename}{literal}/) no-repeat scroll 0px
0px');
$('#resizeme_containment_div_wrapper').css( { width: size[0],
height: size[1] } );
$('#resizeme_containment_wrap_image').css( { width: size[0],
height: size[1], background: 'transparent url(/im/resizer/{/literal}
{$image.filename}{literal}/) no-repeat scroll 0%' } );
});
try {
document.body.removeChild($('#test'));
} catch(e) {};
});
Looking in Firebug o.originalSize always starts at 150x150 then once
you drag goes to 320x240. o.aspectRatio is always 1.
Where am I going wrong?
Thanks, Nick