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!

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:

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: