YUI 3.x Home -

YUI Library Examples: Resize: 8-way Image Resize

Resize: 8-way Image Resize

This example shows a simple 8-way image resize and provides the required CSS elements required for the most common image-resize visual treatment.

View example in new window.

Eduardo Lundgren, Nate Cavanaugh and the YUI Team at Yahoo

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.

  1. <div id="demoContainer" class="yui3-resize-knob">
  2. 	<img id="demo" src="assets/team.jpg" alt="Eduardo Lundgren, Nate Cavanaugh and the YUI Team at Yahoo">
  3. </div>
<div id="demoContainer" class="yui3-resize-knob">
	<img id="demo" src="assets/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.

  1. YUI().use('resize');
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.

  1. YUI().use('resize', function(Y) {
  2.     var resize = new Y.Resize({
  3.         //Selector of the node to resize
  4.         node: '#demo'
  5.     });   
  6. });
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.

  1. YUI().use('resize', function(Y) {
  2.  
  3.     var resize = new Y.Resize({
  4.         //Selector of the node to resize
  5.         node: '#demo'
  6.     });
  7.     resize.plug(Y.Plugin.ResizeConstrained, {
  8.         constrain: '#demoContainer',
  9.         minHeight: 50,
  10.         minWidth: 50       
  11.     });
  12.  
  13. });
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:

  1. #demo {
  2. 	height: 121px;
  3. 	width: 182px;
  4. 	position: absolute;
  5. 	top: 100px;
  6. 	left: 100px;
  7. }
  8.  
  9. #demoContainer {
  10. 	position: relative;
  11. 	height: 333px;
  12. 	width: 500px;
  13.     border: 1px solid black;
  14. }
  15.  
  16. /* knob handles demo */
  17.  
  18. .yui3-resize-knob .yui3-resize-handle-tr,
  19. .yui3-resize-knob .yui3-resize-handle-br,
  20. .yui3-resize-knob .yui3-resize-handle-tl,
  21. .yui3-resize-knob .yui3-resize-handle-bl,
  22. .yui3-resize-knob .yui3-resize-handle-b,
  23. .yui3-resize-knob .yui3-resize-handle-t,
  24. .yui3-resize-knob .yui3-resize-handle-l,
  25. .yui3-resize-knob .yui3-resize-handle-r {
  26. 	border: 1px solid #808080;
  27. 	background-color: #F2F2F2;
  28. 	height: 6px;
  29. 	width: 6px;
  30. }
  31.  
  32. .yui3-resize-knob .yui3-resize-handle-b,
  33. .yui3-resize-knob .yui3-resize-handle-t {
  34. 	left: 45%;
  35. }
  36.  
  37. .yui3-resize-knob .yui3-resize-handle-l,
  38. .yui3-resize-knob .yui3-resize-handle-r {
  39. 	top: 45%;
  40. }
  41.  
  42. .yui3-resize-knob .yui3-resize-handle-t,
  43. .yui3-resize-knob .yui3-resize-handle-tr,
  44. .yui3-resize-knob .yui3-resize-handle-tl {
  45. 	top: -4px;
  46. }
  47.  
  48. .yui3-resize-knob .yui3-resize-handle-b,
  49. .yui3-resize-knob .yui3-resize-handle-br,
  50. .yui3-resize-knob .yui3-resize-handle-bl {
  51. 	bottom: -4px;
  52. }
  53.  
  54. .yui3-resize-knob .yui3-resize-handle-l,
  55. .yui3-resize-knob .yui3-resize-handle-bl,
  56. .yui3-resize-knob .yui3-resize-handle-tl {
  57. 	left: -4px;
  58. }
  59.  
  60. .yui3-resize-knob .yui3-resize-handle-r,
  61. .yui3-resize-knob .yui3-resize-handle-br,
  62. .yui3-resize-knob .yui3-resize-handle-tr {
  63. 	right: -4px;
  64. }
  65.  
  66. .yui3-resize-knob .yui3-resize-handle-inner {
  67. 	background: none;
  68. 	height: 6px;
  69. 	width: 6px;
  70. }
#demo {
	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;
}

More Resize Resources:

Copyright © 2011 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings