Image Scale – jQuery Plugin

January 27th, 2012

(Latest release, v1.0 on 01/27/2012)

ImageScale scales and repositions images into the center of a container div using JavaScript. The plugin aims to reduce maintenance issues when dealing with a fixed content area that needs to handle multiple image sizes.  While JavaScript image resizing isn’t always ideal, this plugin should do the trick when batch image processing is not an available option.

Markup

The markup requires only the container div and the image to be resized. This plugin can also be used in conjunction with various slideshow plugins that have multiple images displayed in the container div.

1: <div id="example1"> 
2: <img src="images/4.jpg" /> 
3: </div> 

Includes

To use ImageScale  you must of course include jQuery, as well as including the single ImageScale JavaScript file .

1: <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
2: <!-- Points of Interest --> 
3: <script type="text/javascript" src="plugins/imagescale.js"></script> 

Initializing

Simply initialize the plugin as you would any other jQuery plugin. Note that this plugin works most reliably when called in the $(window).load function rather than the usual $(document).ready.

1: $("#example1").imageScale({height: 400,width: 400}); 

Options

The two options used in ImageScale are width and height. Generally, these would be the width and height of the parent container.

  • width – the maximum width to which the image will scale
  • height -the maximum height to which the image will scale

View the Demo

Download Demo