The jQuery Scaling Plugin allows users to easily scale photos and div elements a number of different ways, while keeping the aspect ratio intact and the size relative. Users need only call a single element level manager to scale any element on the page.
Page elements can be scaled to match the size ratio of any other elements on the page, or to an arbitrary ratio, or to min/max sizing constrains.
<body>
<div id="compareTo" style="height: 100px; width: 80px;"></div>
<div id="domScaling" style="background: red;"></div>
<div id="directScaling" style="background: green;"></div>
</body>
Scaling is performed by specifying a target to scale to, and a mode.
<head>
<script type="text/javascript" src="script/jquery.min.js"></script>
<script type="text/javascript" src="script/jquery.scaling.min.js"></script>
<script type="text/javascript">
// Once the dom loads...
jQuery(function(){
// Scaling calculated off element matching the selector provided
jQuery('#domScaling').scale({mode: SCALE_DOWN, target: '#compareTo'});
// Scaling calculated by provided target aspect ratio
jQuery('#directScaling').scale({mode: SCALE_UP, target: '8x10'});
});
</script>
</head>
The scaling plugin provides users with a single Element Manager for scaling page elements. It also provides a jQuery/Core Method for calculating the WxH aspect ratio of any element or target.
The jQuery Core Method jQuery.getScale() will return an object in the form: {x: ..., y: ...} containing the aspect ratio of the target.
getScale( target )| Example Target | Type | Description | Example | Return |
|---|---|---|---|---|
| jQuery('#element') | jQuery Object | Will return the aspect ratio of the first element. | An element 60px wide and 100px tall | {x:6,y:10} |
| jQuery('#element').get(0) | HTMLElement | Will return the aspect ratio of the HTMLElement. | An element 5px wide and 3px tall | {x:5,y:3} |
| '#element' | jQuery Selector | Will return the aspect ratio of the first matched element. | An element 50px wide and 50px tall | {x:1,y:1} |
| 120 | Number | Will return the number provided as both the x/y values of the aspect ratio. | 1.2 | {x:1.2,y:1.2} |
| '50%' | Percentage | Will return the percentage provided as both the x/y values of the aspect ratio. | '75%' | {x:.75,y:.75} |
| '5x8' or '5:8' | Direct Ratio | Will return the ratio provided in the proper format. Can seperate by "x" or ":". | '8.5x11' | {x:8.5,y:11} |
| [8,10] | Array | Will return the first two values of the array as the x/y values of the aspect ratio. | [2.5,3.5] | {x:2.5,y:3.5} |
| {x:16, y:9} | Object | Will return itself. | {x:8,y:9} | {x:8,y:9} |
The Element Manager provides the interface for scaling an object a number of different ways.
// The Element Manager
jQuery( '#element' ).scale( ... );
scale( options )| Parameter | Type | Description |
|---|---|---|
| mode | Setting | Sets the scaling mode. See Scaling Modes for all the mode types. |
| target | Mixed | Sets the target for scaling. See the above table on jQuery.getScale() options for a complete list of possible target values. |
| rescale | Boolean | If set to true, the scaling done will use the elements original dimensions. (Useful for scaling an element a number of different ways from the same starting point). |
| asOriginal | Boolean | If set to true, the element's aspect ratio before scaling will be used as the elements new original dimensions. |
| makeOriginal | Boolean | If set to true, the element's aspect ratio after scaling will be used as the elements new original dimensions. |
| sqcorrect | Boolean | If set to true (which is the default), on square or almost square elements (to a tolerance of .975) an auto-correction will be performed that should prevent most scaling discrepancies. |
| Setting Name | Description |
|---|---|
| SCALE_SMART | [Default] When scaling up an element, a number of factors are considered by the code, and the element is either scaled up or down. This can change if you continue to scale the element with smart scaling mode. |
| SCALE_DOWN | When scaling down an element, its smallest side will be used as a guideline, and the longer side will be reduced to meet the target ratio. |
| SCALE_UP | When scaling up an element, its largest side will be used as a guideline, and the smaller side will be increased to meet the target ratio. |
| SCALE_RAW | When raw scaling an element, its dimensions will be directly deformed by the aspect ratio. If you provide a target of 2x.5 during raw scaling, the width would be doubled and height would be halved. |
| SCALE_MIN | When scaling to a minimum size, the dimenions will be enlarged so that its smaller side is at or greater than the minimum. Keeps its own aspect ratio. |
| SCALE_MAX | When scaling to a max size, the dimenions will be decreased so that its larger side is at or less than the maximum. Keeps its own aspect ratio. |
Please visit: http://eric.garside.name/demo.html?p=scaling
The current version of Scaling can be downloaded from Google Code
You can also checkout the subversion repository for Scaling with the following command:
svn checkout http://scaling.googlecode.com/svn/trunk/ scaling-read-only