jQuery Image Resize

Eric Juden In the Trenches

Let me start off by saying, I LOVE jQuery! It’s the greatest thing since sliced bread! Now that I have that out of the way, I’ve been working on developing some WordPress themes for work. We are going to be launching a blogs site (using WordPress MU) fairly soon for faculty, staff, and eventually students. So, in the process we are building a blog that will be used as an online newsletter. On the blog page, they want the top story to take precedence, and for the image to be larger. So to accomplish this, I wanted to scale down the other images and keep the aspect ratio. Enter jQuery…

I was looking out there at some of the solutions already completed. I didn’t see anything that quite did what I was looking for. So I made my own function:

The 2nd line of code says to grab every image with a class of ‘story-small’. The block for the height is just a safety net. I have it there in case the height is still larger than the max. There are a hundred ways to skin a cat, so I’m sure there are plenty of other ways to do this.

43 thoughts to “jQuery Image Resize”

  1. You probably should set width in first if-statement like you do with height:

    width = maxWidth;

    Otherwise it calculates new width wrong in second if.

  6. You are just modifying the image properties. Can someone tell me if I can actually do some image manipulation on the client side (JQuery) before it gets uploaded to the server?

    Say someone is uploading 2MB 2500×2500 image, I want to resize it to 500×500 and then send the modified (smaller) file to the server rather than full 2MB? Or it is too much to ask from javascript?

  7. khan,

    I think you'd be better off using a server-side language like php or asp.net to process the images when the files are being uploaded.

    Eric

  8. Hi,

    I start from this post to create a resize image function but I have problem with safari,
    var width = $(this).width(); // Current image width
    var height = $(this).height(); // Current image height

    returns 0

    I try to find a work around then keep you posted

  9. Hi,

    I'm sorry to be so bad but this is not working for me.

    I've downloaded jquery 1.3.2 on jquery.com

    I insert it like that

    script src="jquery-1.3.2.js" type="text/javascript"

    I paste your code exactly in my page.

    I have only that:

    img src="dff30__N1D0212.JPG" class="story-small"

    and nothing has changed.

    Can you please help me. I need so baddly this to work.

    Thanks

    Cedric

  12. Cedric,

    Try putting your image inside a div with a class of "story-small". The css was looking for an element with a class of "story-small" with an image inside of it.

    Eric

  13. Thank you so much !!
    I don't know why I put a class inside the img.

    Thanks.

    BTW, you have a very nice blog, very interesting.

    Take care

  15. Hey Eric,

    i have a question to your Script.

    Am i right, that this script only changes the size of the div and doesnt resize the picture itself?

    Greetings,
    Michael

  16. Michael,

    You are not correct. The script is resizing the image, and not a div. The 2nd line of the script says ('.story-small img'). That is grabbing any image tag inside of a div with a class of story-small.

    Thanks,

    Eric

  18. To select any img with a class of story-small you could use ('img.story-small') if you didn't want to put each image inside of a div

  19. Hi,

    This is a very handy script, but I'm having some problems with it.
    I'm browsing with Safari, Chrome and Firefox on a mac and the first time I visit a page on my website the images arn't resized. If I reload the page, they resize.

    I think my browser doesn't know the size of the images when the document is loaded.

    this is an example of my website I'm developing: http://fileflambe.be/topics/117-raad-de-screensho…

    Is there a solution for this problem?

  20. Joren,

    When I view the link you posted it shows the images full size until the page is done loading. Then the image is scaled down. I'm not sure how to fix this besides making your page load faster so it's not as noticeable.

    Thanks,

    Eric

  23. Joren,

    I think you'd probably be better of doing this on the server side, instead of using Javascript. Your images are pretty large and it's taking the page longer to load.

    Eric

  24. you are wrong, jquery does not get the image width, instead of "each()" use "load()"; try an alert imediatly after you get the image height in both each and load events, you will see that "each" returns width 0 and "load" returns the correct width 🙂

  25. Hi Eric
    Thanks for this!
    I think I have solved Joren's problem, which I was also experiencing, by doing this:

    $('.main_content_text img').load(function() {
    $('.main_content_text img').each(function() {

    at the start instead of:

    $(document).ready(function() {
    $('..main_content_text img').each(function() {

    What do you think?

    Thanks, James

  28. It doesn't work in Google Chrome as it tries to execute your code at the same time as loading the images, so we need to tell it to wait for the images to load (so wrap this function round your $('.images img').each function):

    $('.images img').load(function() {
    // your code in here
    });

    1. Dave,

      Thanks for the input. When I used this I didn't have super large images loading. I meant it more as an image resize for small to medium size images.

      Eric

  30. Hi Mikko

    The script is very good. But i have some problem.
    What you script did, only set the width & height right?

    But when i right click on image & save as, that case originla image is save.

    I want resize that to save new image.

    Please help me if you know?
    Thank you
    Vyom

  31. Hello,

    The script is very helpfull.
    Runs perfect in FF,Safari,Chrome.
    Doesn't work in IE.
    Please help me.

    Thank you,
    D

  32. Dear D123!
    Work in IE7,8,9. In IE6, try add () to "maxWidth / width" and "maxHeight / height":
    —————————————
    ratio = (maxWidth/width); // get ratio for scaling image
    —and———————————
    ratio = (maxHeight/height); // get ratio for scaling image
    —————————————

    Thanks!

  34. Pingback: How do I resize images and keep the proportion / aspect ratio? | Easy jQuery | Free Popular Tips Tricks Plugins API Javascript and Themes

  35. Great code Eric, thanks! I'm trying to get this to work on images that I am using inside inputs e.g

    any suggestions?

  36. sorry my code was not displayed above..

    (Lessthansign) input style='background: url(images/buttons/next.png) center no-repeat;width:150px;height:200px;'type='button'/ (Greaterthansign)

    1. Hey Jon,

      I'm not sure this would work using a background image. The above code that I've listed is for actual images using the img tag.

      Eric

  37. Hi, I´m new in the world of JQuery, Can you put a html example? I don´t know very well how it works? I need create a div ?

    Thanks

    1. Hi Dommie,

      Yes, the image needs to be in a div. In my example above, I had it in a div with a class of story-small.

      <pre lang="html"><div class="story-small"><img src="#" /></div></pre>

      Hope that helps,

      Eric

  38. Hi, Thanks for the code it was helpful! I change it to my needs. My goals was to make an image in a div work as a background and the image would re-size with the window resolution when the screen size changed.

    //get the windows width with no additional columns

    var bodywidth = $(document).width();

    //get the hieght of the window minus header and footer

    var bodyheight = $(document).height() – $(".header").height() – $(".footer").height();

    //this is my ratio ~ 1.67

    var imgRatio=1481/883;

    //get current window ratio including my footer;

    var mydisplayRatio=bodywidth/(bodyheight+$(".footer").height());

    //if mydisplay ratio is BIGGER then contrain in height otherwise constrain in width

    if (mydisplayRatio>imgRatio) {

    $("#img_alexko").height(bodyheight+$(".footer").height());

    $("#img_alexko").width(((bodyheight+$(".footer").height()) * imgRatio));

    }else{

    $("#img_alexko").width(bodywidth);

    $("#img_alexko").height(bodywidth/imgRatio);

    }

    1. can you please specify how you did that, because in mine website doesn't work.

      $(document).ready(function() {

      $('.studyaboard2').each(function() {

      //get the windows width with no additional columns

      var bodywidth = $(document).width();

      //get the hieght of the window minus header and footer

      var bodyheight = $(document).height() – $('.studyaboard2').height() – $('.studyaboard2').height();

      //this is my ratio ~ 1.67

      var imgRatio=1481/883;

      //get current window ratio including my footer;

      var mydisplayRatio=bodywidth/(bodyheight+$('.studyaboard2').height());

      //if mydisplay ratio is BIGGER then contrain in height otherwise constrain in width

      if (mydisplayRatio>imgRatio) {

      $('#img_alexko').height(bodyheight+$('.studyaboard2').height());

      $('#img_alexko').width(((bodyheight+$('.studyaboard2').height()) * imgRatio));

      }else{

      $('#img_alexko').width(bodywidth);

      $('#img_alexko').height(bodywidth/imgRatio);

      }

      });

      });

      the image goes on top, not on the background

Comments are closed.