jQuery Image Resize Plugin v2.1.1

Nov 29

Adeel EjazjQuery Image Resize Plugin 31 Comments

The latest release for jQuery Image Resize Plugin fixes a nasty bug and as the following updates:

  • Fixed: Plugin stops working if height parameter was left out.
  • Optimised the whole plugin by reducing excessive function calls.
  • Improved code structure for quick execution.
  • Smaller minified version.

Download the latest version: http://github.com/adeelejaz/jquery-image-resize/downloads
Report any bugs: http://github.com/adeelejaz/jquery-image-resize/issues

jQuery Image Resize Plugin v2.1

Nov 01

Adeel EjazjQuery Image Resize Plugin 3 Comments

The latest version of jQuery Image Resize plug-in is out and includes the following updates:

  • The plugin doesn’t need both height and width parameters anymore. The plugin caters for just one parameter e.g. if width parameter is supplied, the plugin works out the height and vice versa.
  • Fixed a weird IE6 bug.
  • Chainability – The plugin now returns the jQuery object. So, now you can do stuff like $(".resizeme").aeImageResize({width: 250}).css('color', '#000');
  • More optimised.
  • Minified using Google Clousure (like jQuery).

Download the latest version: http://github.com/adeelejaz/jquery-image-resize/downloads
Report any bugs: http://github.com/adeelejaz/jquery-image-resize/issues

jQuery Image Resize Plugin v2.0

Jun 25

Adeel EjazjQuery Image Resize Plugin 27 Comments

I found out there was already a jQuery plugin called ‘resize’ so I renamed my plugin to .aeImageResize

I also have included a better minified version of the plugin.

You can download the latest version from here

jQuery Resize Plugin – Dynamically resize images

Jun 16

Adeel EjazjQuery Image Resize Plugin No Comments

I finally managed to move my development code to Ubuntu and Git. So, lets kick start with the first Git Repository, jquery-image-resize. It includes example and minified version of the script.

Download the latest version:
https://github.com/adeelejaz/jquery-image-resize/downloads

I’ll try my best to give support on my blog but if you find any issues, please report them to the Issue Tracker.

Function to dynamically resize images using jQuery

Nov 08

Adeel EjazjQuery Image Resize Plugin 17 Comments

UPDATE: I have created a jQuery plugin that dynamically resizes the images. It is faster and is optimized better (minified).

I have noticed that there has been quite a bit of interest in my post about dynamically resizing images using jQuery. I have created a function to do this job better. Not only it makes the code cleaner but it also makes it a lot easier to use it.

First, for those people looking for a quick lookup of solution, here is the optimized version of the function followed by a couple of examples to use it:

 javascript |  copy code |? 
1
$.fn.resize=function(a){var d=Math.ceil;if(a==null)a=200;var e=a,f=a;$(this).each(function(){var b=$(this).height(),c=$(this).width();if(b>c)f=d(c/b*a);else e=d(b/c*a);$(this).css({height:e,width:f})})};

2
 
3
$("img").resize(200);

4
$("#thumbs img").resize(150);

And now the explanation.. The function takes one argument, a number, which is the maximum height and/or the width of the image. The function automatically decides what is the best way to resize the image as its all calculated from the proportions of the original image.

What follows below is an expanded (non-optimized) version of the function and explanation on what each statement does:

NOTE: I do highly recommend using the optimized version of the function above

 javascript |  copy code |? 
01
$.fn.resize = function(max_size) {

02
  m = Math.ceil;

03
  if (max_size == undefined) {

04
    max_size = 200;

05
  }

06
  h=w= max_size;

07
  $(this).each(function() {

08
    image_h = $(this).height();

09
    image_w = $(this).width();

10
    if (image_h > image_w) {

11
      w = m(image_w / image_h * max_size);

12
    } else {

13
      h = m(image_h / image_w * max_size);

14
    }

15
    $(this).css({height:h,width:w});

16
  })

17
};

Line 1 declares the function “resize” and accepts a variable for maximum height/width.
Line 2 stores the Math.ceil function to a single letter variable for calling up later by m(). It is same as calling Math.ceil() and is done this way for reducing the size of the script (called minifying).
Lines 3 to 5 check if a maximum height/width was specified, if not, the script defaults to a maximum size of 200px.
Line 6 sets two variables ‘h’ for height and ‘w’ for width to the maximum size. One of these variables will be changed depending up the proportions of the image being resized.
Line 7 starts the jQuery.each function that iterates over each image one by one.
Line 8 stores the image’s height to a variable and is for reducing the size of the script.
Line 9 stores the image’s width to a variable and is for reducing the size of the script.
Line 10 checks if the image height is greater than the image width.
Line 11 only executes when the image’s height is bigger than the width. It calculates the image’s new width with proportion to its original size (which would be less than the height).
Line 12 is basic else statement.
Line 13 only executes when the image’s width is bigger than the height. It calculates the image’s new height with proportion it its original size (which would be less than the width).
Line 15 uses the jQuery’s built-in CSS function to set the new height and width for the image.

Older Entries