This example shows a simple 8-way image resize and provides the required CSS elements required for the most common image-resize visual treatment.
Setting up the Node
First we need to create an image to resize; we wrap the image in another element to provide some CSS hooks.
<div id="demoContainer" class="yui3-resize-knob"> <img id="demo" src="../assets/resize/team.jpg" alt="Eduardo Lundgren, Nate Cavanaugh and the YUI Team at Yahoo"> </div>
Setting up the YUI Instance
Next, we need to create our YUI instance and tell it to load the resize module.
YUI().use('resize');
Making the Node Resizable
Now that we have a YUI instance with the resize module, we need to instantiate the Resize instance on this element.
YUI().use('resize', function(Y) {
var resize = new Y.Resize({
//Selector of the node to resize
node: '#demo'
});
});
Adding the Constrained Plugin
Now we add the ResizeConstrained plugin. This plugin will allow you to limit the resize dimensions in special ways.
YUI().use('resize', function(Y) {
var resize = new Y.Resize({
//Selector of the node to resize
node: '#demo'
});
resize.plug(Y.Plugin.ResizeConstrained, {
constrain: '#demoContainer',
minHeight: 50,
minWidth: 50
});
});
Adding CSS
Image resize operations typically have their own visual treatment and therefore require slightly different drag handles in order to be discoverable and intuitive. Here is CSS that provides a common image-resize visual treatment:
#demo {
display: block; // fixes image misalignment
height: 121px;
width: 182px;
position: absolute;
top: 100px;
left: 100px;
}
#demoContainer {
position: relative;
height: 333px;
width: 500px;
border: 1px solid black;
}
/* knob handles demo */
.yui3-resize-knob .yui3-resize-handle-tr,
.yui3-resize-knob .yui3-resize-handle-br,
.yui3-resize-knob .yui3-resize-handle-tl,
.yui3-resize-knob .yui3-resize-handle-bl,
.yui3-resize-knob .yui3-resize-handle-b,
.yui3-resize-knob .yui3-resize-handle-t,
.yui3-resize-knob .yui3-resize-handle-l,
.yui3-resize-knob .yui3-resize-handle-r {
border: 1px solid #808080;
background-color: #F2F2F2;
height: 6px;
width: 6px;
}
.yui3-resize-knob .yui3-resize-handle-b,
.yui3-resize-knob .yui3-resize-handle-t {
left: 45%;
}
.yui3-resize-knob .yui3-resize-handle-l,
.yui3-resize-knob .yui3-resize-handle-r {
top: 45%;
}
.yui3-resize-knob .yui3-resize-handle-t,
.yui3-resize-knob .yui3-resize-handle-tr,
.yui3-resize-knob .yui3-resize-handle-tl {
top: -4px;
}
.yui3-resize-knob .yui3-resize-handle-b,
.yui3-resize-knob .yui3-resize-handle-br,
.yui3-resize-knob .yui3-resize-handle-bl {
bottom: -4px;
}
.yui3-resize-knob .yui3-resize-handle-l,
.yui3-resize-knob .yui3-resize-handle-bl,
.yui3-resize-knob .yui3-resize-handle-tl {
left: -4px;
}
.yui3-resize-knob .yui3-resize-handle-r,
.yui3-resize-knob .yui3-resize-handle-br,
.yui3-resize-knob .yui3-resize-handle-tr {
right: -4px;
}
.yui3-resize-knob .yui3-resize-handle-inner {
background: none;
height: 6px;
width: 6px;
}