jQuery Image Resize

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.

You may also like...

43 Responses

  1. Mikko says:

    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.

  2. Eric Juden says:

    Thanks Mikko, I overlooked that. ๐Ÿ™‚

  3. Takitani says:

    Very good, thx for sharing

  4. Thanks – totally bailed me out!

  5. khan says:

    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?

  6. Eric Juden says:

    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

  7. sylbal says:

    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

  8. Cedric says:

    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

  9. Eric Juden says:

    Cedric,

    Can you send a link to the page you are doing this on? Do you have a javascript debugger that is showing any errors?

    Thanks,

    Eric

  10. Eric Juden says:

    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

  11. Cedric says:

    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

  12. Thanks a lot! this script is lake Druce Lee, simple and effective.

  13. Michael says:

    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

  14. Eric Juden says:

    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

  15. Michael says:

    Ah nice thanks for the Information, now i know how to use it.

    Greetings,
    Michael

  16. Jules Van de Velde says:

    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

  17. joren says:

    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?

  18. Eric Juden says:

    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

  19. Jared says:

    Or try preloading the image….

  20. joren says:

    weird,

    I have the same problem on this page http://fileflambe.be/posts/1798-google-auto-aanvu
    the first time the image stay big.

    If it is only me who is seeing them big, there is noproblem ๐Ÿ™‚

  21. Eric Juden says:

    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

  22. Geeo says:

    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 ๐Ÿ™‚

  23. James says:

    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

  24. keyur says:

    simillar problem as weird, but in IE thier is no issue. it may cause problem in FF

  25. Worked right away, thanks!

  26. Dave Reeder says:

    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
    });

    • Eric Juden says:

      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

  27. steven lots says:

    You can solve the problems with safari and chrome, by running the code on $(window).load(…) instead of $(document).ready(….).

  28. Vyom says:

    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

  29. D123 says:

    Hello,

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

    Thank you,
    D

  30. Bim says:

    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!

  31. Koen Zomers says:

    Works like a charm, thanks for sharing!

  32. jon says:

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

    any suggestions?

  33. jon says:

    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)

  34. Dommie says:

    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

    • Eric Juden says:

      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

  35. Raymond Moncada says:

    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);

    }

    • george says:

      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

Leave a Reply

Your email address will not be published. Required fields are marked *