Cut & Paste jScale Image Scaler v1.01
|
Description: jScale is a practical jQuery plugin that lets you easily scale an image on the page proportional to its original dimensions in numerous ways. Simply set the new desired length of any of the image's two sides, and have the script scale the other side accordingly. It lets you:
- Scale an image based on a new value assigned to either the image's width or height, in pixels or percentage (relative to the original value).
- Scale an image based on a new value assigned to the longest side of the image, enabling you to do something like "Scale an image so its longest side is 200px", for example.
The script dynamically determines the native dimensions of the image in question, and does not rely on the width/height attributes inside the image. As such, you're free to resize the image initially using HTML attributes, then have jScale scale it according to proportion. The script supports gradually animating the image into its new dimensions, plus a callback function when the scaling is complete. A very practical script that fills the inadequacies of CSS when it comes to scaling an image!
Examples:
Code used: jQuery(document).ready(function($){ |
Code used: jQuery(document).ready(function($){ |
- Original image dimensions: 390 x 260 pixels
Code used:
$('#room3').jScale({ls:'500px', speed:2000}, function(){
$(this).css({opacity:1)
//alert("Scaling complete!")
})
As a plugin jScale behaves like a built-in jQuery method, and supports chaining.
Directions: Simply copy the below code into the <head> section of your page:
The code above references the external .js file jquery.jScale.js, which you should download by right clicking, and selecting "Save As".
Usage:
Call the jScale() method on any jQuery collection of images to scale them. The syntax is:
jScale(setting, optcallbackfunc)
Where setting is a blank object that supports the following options:
| option | Description |
|---|---|
| w | String that sets the width of the
image in pixels or percentage relative to the native width, ie: '250px'
or '75%'. The height is then auto scaled accordingly. |
| h | String that sets the height of the image in pixels or percentage relative to the native height. The width is then auto scaled accordingly. |
| ls | String that sets the length of the longest side of the image in pixels or percentage relative to the native height. The length of the shorter side is then auto scaled accordingly. |
| speed | Optional integer option that if set animates the
image into its scaled dimensions per the desired duration, in
milliseconds, ie: 2000. |
In general for the options in gray above, no two options should be defined at the same time on an image. That's because you want the script to automatically scale one side of the image based on the value you've assigned the other. Here are a few examples:
1) Resize all images on the page to be 80% of their former selves when page loads:
jQuery(document).ready(function($){
$('img').jScale({w:'80%'})
})
2) Resize images with CSS class "smallversion" on the page so the longest side is 100px using a 2 second animation:
jQuery(document).ready(function($){
$('.smallversion').jScale({ls:'100px', speed:2000})
})
The method also supports an optional a callback function (following
"setting") that if defined is run when the image has completed scaling. The "this"
keyword if used inside the function references the image in question. For
example:
Set image with ID "mypet" so its opacity is 0.5, then scale it so its height is "50px" using a 1 second animation, and when complete, set its opacity back to 1:
jQuery(document).ready(function($){
$('#mypet').css({opacity:0.5}).jScale({h:'50px', speed:1000},
function(){
$(this).css({opacity:1})
})
})