jQuery Image Resize Plugin v2.1.1

flattr this!

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

  • Dan

    Thanks so much for this very helpful jQuery plugin.

    v2.1.1 works perfectly in FireFox, but does not seem to work at all in IE 8.

    Can you look into this?

    Thank you.

    • http://adeelejaz.com/ Adeel Ejaz

      Hi Dan,

      I tried but can’t reproduce the issue. Can you please give me an example code? You can email it to me by via the contact form.

      Thanks.

      • http://www.izee.nl MasterBlue

        Hi Adeel,
        thanks for this script.
        If you want to see the script you should use IE8 and use the example you added with the latest version (Nov 29).
        I have the same problem. In FireFox and Chrome it works fine. Safari not known.

        • http://adeelejaz.com/ Adeel Ejaz

          Hi MasterBlue, when I said I can’t re-produce, I used IE6, IE7 and IE8. It is working perfectly for me in all those browser.

  • http://mashup.sunnydsouza.com Sunny Dsouza

    Could you please navigate to my current website (linked above) and tell me how i could integrate this script to produce correct thumb images for articles :(

    • http://adeelejaz.com/ Adeel Ejaz

      They look fine to me.

  • http://www.izee.nl MasterBlue

    The script is only resizing, right? Not minimize the bytes?

    • http://adeelejaz.com/ Adeel Ejaz

      Yes, it just adds the height and width CSS on the image. The actual image size and bytes stay as they are.

  • http://www.avotrading.com.au/Products%2020110301.html Jase

    I’m using the image resize plugin on a dynamically loaded main image after changing the source using .attr() when hovering over a thumbnail. The plugin works OK on Safari but on Firefox it grabs the dimensions from the previously displayed image rather than the fresh one. I expect this is because the image hasn’t been fully loaded into the DOM / browser cache. Other people also report problems getting the dimensions of dynamically loaded images. If you can solve this in your plugin or suggest a workaround that would be great. Have tried .load() for the dynamic image after .attr() but without luck.

    • http://adeelejaz.com/ Adeel Ejaz

      I’ve checked the code in Chrome and Firefox. When you hover the mouse over the thumbnail, only two product’s pictures are shown big. The rest of the pictures do not work because there are no pictures uploaded on http://www.avotrading.com.au/images/products/large/ (the directory only has two images).

      • http://www.avotrading.com.au/Products%2020110301.html Jase

        Sorry, the page continued to be reworked after my message so some image details may have changed. However, my own workaround was to use original images as thumbnails with height & width specified. Specifying the HxW for each image solved the problem with the image resize plugin using the values from the previous displayed image. The image resize was required for the main image change on thumbnail hover, not on the thumbnails themselves.

      • http://www.avotrading.com.au/test_products/carouFREDsel_8.html Jase

        Still having resize issues with FireFox on Windows. It would appear that aeImageResize isn’t loading. Works fine on other browsers.

  • http://www.jamiesterling.co.uk Jamie Sterling

    The plugin is great = so thanks for your work. My only slight issue is that the images appear full size before page loads and the script executes.

    Is there a way to stop this, or use it as a callback with an image loading script?

    • http://adeelejaz.com/ Adeel Ejaz

      I had a similar issue and I got around it with:

      In CSS:
      .resizeme { display: none; }

      And modified the plugin call to:
      $( ".resizeme" ).aeImageResize({ height: 250, width: 250 }).css("display", "inline");

      • http://www.jamiesterling.co.uk Jamie Sterling

        Cheers for the tip – works well and with a lot less hassle than I expected.

      • http://www.rangde.org Arvind Sridharan

        Hey, I would like to know more about this number – where do I put this number? As the class of the image?

        • http://adeelejaz.com/ Adeel Ejaz

          It wasn’t a number. WordPress was messing up the code. I’ve fixed it.. have a look.

  • http://www.sportbloging.info Eleni

    I’m using the image resize plugin on a dynamically loaded main image after changing the source using .attr() when hovering over a thumbnail. The plugin works OK on Safari but on Firefox it grabs the dimensions from the previously displayed image rather than the fresh one. I expect this is because the image hasn’t been fully loaded into the DOM / browser cache. Other people also report problems getting the dimensions of dynamically loaded images. If you can solve this in your plugin or suggest a workaround that would be great. Have tried .load() for the dynamic image after .attr() but without luck.
    +1

    • http://adeelejaz.com/ Adeel Ejaz

      The plugin only runs once,when the page is loaded first time. To resize with the newly loaded image, you will need to call the plugin again.

      Try this: http://jsfiddle.net/CpFDm/

      • Nikolino

        There is a problem in Firefox… I try your script but the first time I click the button the loaded image take the aspect of the first image. I need to click again to have the correct aspect.
        You don’t see this problem?

  • http://twitter.com/justinthiele Justin

    Thanks for the plugin Adeel!

    Nice & simple :)

  • http://www.thejagat.com TheJagat

    Thanks for your plugin Adeel .. its nice stuff :)

  • ResizeUser

    Hi Adeel,
    Thanks for your nice script! I’ve a question. Is there a way to return the new size back after the call?
    If I re-size the image to 640X480, I need to use the new height to adjust other components.

  • Greg

    Can you confirm or deny that this works in IE9?

    • http://adeelejaz.com/ Adeel Ejaz

      Yes, IE9 has an issue. It doesn’t run the script first time but when you refresh the screen, it resizes the images. I’m working on a fix.

  • Chris

    Thanks man!

  • Suley

    Hi, how can i make the images not propotional but use the height and width i specify? Also when can we look for an update for ie9?

    • Denis

      +1
      Thanks ;)

  • waldo

    Works well… but unfortunately won’t resolve my problem.

    • http://adeelejaz.com/ Adeel Ejaz

      And your problem is?

  • Jonathan Gosage

    I am new to JQuery and especially to plugins.

    I have loaded the plugin using:

    and I am trying to invoke it from the following function:

    // Scale an image
    function scaleImage(scale) {
    w = $(this).width;
    h = $(this).height;
    $(this).aeImageResize(Math.max(w, h) * scale);
    }

    which in turn is invoked by the following code:
    $(“#spanishButton > img”).each(scaleImage(0.75));

    This works in Opera and Safari but fails in various ways having to do with undefined variables in JQuery itself when running in Chrome, Firefox or IE9. Do I have a problem in trying to setup things or are there known problems in the non-working browsers.
    .

    TIA
    Jonathan

  • Tholsy

    I was having difficulties with IE9 also. It works ok in Firefox. I was messing around with the function call for a dynamically driven page for images. This seems to work for me.
    $(function() {
    $( “.resizeme” ).aeImageResize({ height: 110, width: 110 });
    });

    Adjust the IMG tag to

    each time the image loads, it will then invoke the resize. I did not have to do anything to the css file. Otherwise, the best piece of code I have seen. Thanks Adeel

    • Tholsy

      The image tag did not display in my post…add this onload=”aeImageResize(’110′,’110′)” inside your IMG tags

      • hindy

        I add that to my images onload=”aeImageResize(’50′,’50′);”
        and get error that “aeImageResize is not defined”
        ..I did include this in header..

        any suggestions???

        • hindy

          It’s working in FireFox for me now but not in IE8..I get error “Object Expected”

        • http://adeelejaz.com/ Adeel Ejaz

          Try this: onload=”$(this).aeImageResize({ height: 50, width: 50 })”

  • Rikard

    Love this plugin, but any way to have the image allow upscale itself beyound the size of the original image, eg “ZOOM” ???

  • http://www.ftfdesigns.com Immanuel

    This is still the latest version right?

  • Chintan Desai

    Hello,

    I am trying to use this plugin to resize the image in IE7, IE8 but after I load the first image, when I try to load another image [I have a browse functionality to allow user to upload multiple images] I get stack overflow error and then I just have to clear up the cache and re open browser for the page to work.

    Any help is appreciated.

  • Adam

    hi guys

    im using this great script but having a problem…

    it works as standard but the thing is, im changing my image via jquery and attr(“src”) commands.

    when i do this the new image appears incorrect in aspect ration and position on screen until i resize the browser a little.

    how can i invoke the plugin to run as soon as i change the image?

    • http://adeelejaz.com/ Adeel Ejaz

      After changing the “src” attribute, call the plugin again. You can chain them:
      $(“.someImg”).src(“http://example.com/new-img.png”).aeImageResize({ height: 250, width: 250 });