35d039da10970deb9abb779286f19907ec86350cDav Glass<div class="intro">

35d039da10970deb9abb779286f19907ec86350cDav Glass<p>This example shows a simple 8-way image resize and provides the required CSS elements required for the most common image-resize visual treatment.</p>

35d039da10970deb9abb779286f19907ec86350cDav Glass</div>

35d039da10970deb9abb779286f19907ec86350cDav Glass

35d039da10970deb9abb779286f19907ec86350cDav Glass<div class="example">

35d039da10970deb9abb779286f19907ec86350cDav Glass {{>image-resize-source}}

35d039da10970deb9abb779286f19907ec86350cDav Glass</div>

35d039da10970deb9abb779286f19907ec86350cDav Glass

35d039da10970deb9abb779286f19907ec86350cDav Glass

35d039da10970deb9abb779286f19907ec86350cDav Glass<h3>Setting up the Node</h3>

35d039da10970deb9abb779286f19907ec86350cDav Glass<p>First we need to create an image to resize; we wrap the image in another element to provide some CSS hooks.</p>

35d039da10970deb9abb779286f19907ec86350cDav Glass

35d039da10970deb9abb779286f19907ec86350cDav Glass```

35d039da10970deb9abb779286f19907ec86350cDav Glass{{>image-resize-source-html}}

35d039da10970deb9abb779286f19907ec86350cDav Glass```

35d039da10970deb9abb779286f19907ec86350cDav Glass

35d039da10970deb9abb779286f19907ec86350cDav Glass<h3>Setting up the YUI Instance</h3>

35d039da10970deb9abb779286f19907ec86350cDav Glass<p>Next, we need to create our YUI instance and tell it to load the `resize` module.</p>

35d039da10970deb9abb779286f19907ec86350cDav Glass

35d039da10970deb9abb779286f19907ec86350cDav Glass```

35d039da10970deb9abb779286f19907ec86350cDav GlassYUI().use('resize');

35d039da10970deb9abb779286f19907ec86350cDav Glass```

35d039da10970deb9abb779286f19907ec86350cDav Glass

35d039da10970deb9abb779286f19907ec86350cDav Glass<h3>Making the Node Resizable</h3>

35d039da10970deb9abb779286f19907ec86350cDav Glass<p>Now that we have a YUI instance with the `resize` module, we need to instantiate the `Resize` instance on this element.</p>

35d039da10970deb9abb779286f19907ec86350cDav Glass

35d039da10970deb9abb779286f19907ec86350cDav Glass```

35d039da10970deb9abb779286f19907ec86350cDav GlassYUI().use('resize', function(Y) {

35d039da10970deb9abb779286f19907ec86350cDav Glass var resize = new Y.Resize({

35d039da10970deb9abb779286f19907ec86350cDav Glass //Selector of the node to resize

35d039da10970deb9abb779286f19907ec86350cDav Glass node: '#demo'

35d039da10970deb9abb779286f19907ec86350cDav Glass });

35d039da10970deb9abb779286f19907ec86350cDav Glass});

35d039da10970deb9abb779286f19907ec86350cDav Glass```

35d039da10970deb9abb779286f19907ec86350cDav Glass

35d039da10970deb9abb779286f19907ec86350cDav Glass

35d039da10970deb9abb779286f19907ec86350cDav Glass<h3>Adding the Constrained Plugin</h3>

35d039da10970deb9abb779286f19907ec86350cDav Glass<p>Now we add the `ResizeConstrained` plugin. This plugin will allow you to limit the resize dimensions in special ways.</p>

35d039da10970deb9abb779286f19907ec86350cDav Glass

35d039da10970deb9abb779286f19907ec86350cDav Glass

35d039da10970deb9abb779286f19907ec86350cDav Glass```

35d039da10970deb9abb779286f19907ec86350cDav Glass{{>image-resize-source-js}}

35d039da10970deb9abb779286f19907ec86350cDav Glass```

35d039da10970deb9abb779286f19907ec86350cDav Glass

550f861aace873c32d866df107c28ec015436d31Dav Glass<h3>Adding CSS</h3>

35d039da10970deb9abb779286f19907ec86350cDav Glass

35d039da10970deb9abb779286f19907ec86350cDav Glass<p>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:</p>

35d039da10970deb9abb779286f19907ec86350cDav Glass

35d039da10970deb9abb779286f19907ec86350cDav Glass```

35d039da10970deb9abb779286f19907ec86350cDav Glass{{>image-resize-source-css}}

35d039da10970deb9abb779286f19907ec86350cDav Glass```