{"id":45,"date":"2009-11-08T03:27:10","date_gmt":"2009-11-08T03:27:10","guid":{"rendered":"https:\/\/adeelejaz.com\/blog\/?p=45"},"modified":"2016-01-12T23:20:45","modified_gmt":"2016-01-12T23:20:45","slug":"function-dynamically-resize-images-jquery","status":"publish","type":"post","link":"https:\/\/adeelejaz.com\/blog\/function-dynamically-resize-images-jquery\/","title":{"rendered":"Function to dynamically resize images using jQuery"},"content":{"rendered":"<p><b>UPDATE: I have created a <a href=\"https:\/\/adeelejaz.com\/blog\/type\/jquery-image-resize-plugin\/\">jQuery plugin that dynamically resizes the images<\/a>. It is faster and is optimized better (minified).<\/b><\/p>\n<p>I have noticed that there has been quite a bit of interest in my post about <a href=\"https:\/\/adeelejaz.com\/blog\/resize-images-on-fly-using-jquery\/\">dynamically resizing images using jQuery<\/a>. 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.<\/p>\n<p>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:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/adeelejaz\/0335708f8b461a357cef\/768d73f532add58322518b907581ee0d596de84a.js\"><\/script><\/p>\n<p>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.<\/p>\n<p>What follows below is an expanded (non-optimized) version of the function and explanation on what each statement does:<\/p>\n<p><b>NOTE: I do highly recommend using the optimized version of the function above<\/b><\/p>\n<p><script src=\"https:\/\/gist.github.com\/adeelejaz\/0335708f8b461a357cef\/802c7c820db9142628177a1608cca617c2e7c95f.js\"><\/script><\/p>\n<p>Line 1 declares the function &#8220;resize&#8221; and accepts a variable for maximum height\/width.<br \/>\nLine 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 <a href=\"https:\/\/en.wikipedia.org\/wiki\/Minification_(programming)\">minifying<\/a>).<br \/>\nLines 3 to 5 check if a maximum height\/width was specified, if not, the script defaults to a maximum size of 200px.<br \/>\nLine 6 &#038; 7 sets two variables &#8216;h&#8217; for height and &#8216;w&#8217; for width to the maximum size. One of these variables will be changed depending up the proportions of the image being resized.<br \/>\nLine 9 starts the <a href=\"http:\/\/api.jquery.com\/jQuery.each\/#objectcallback\">jQuery.each<\/a> function that iterates over each image one by one.<br \/>\nLine 10 stores the image&#8217;s height to a variable and is for reducing the size of the script.<br \/>\nLine 11 stores the image&#8217;s width to a variable and is for reducing the size of the script.<br \/>\nLine 12 checks if the image height is greater than the image width.<br \/>\nLine 13 only executes when the image&#8217;s height is bigger than the width. It calculates the image&#8217;s new width with proportion to its original size (which would be less than the height).<br \/>\nLine 14 is basic else statement.<br \/>\nLine 15 only executes when the image&#8217;s width is bigger than the height. It calculates the image&#8217;s new height with proportion it its original size (which would be less than the width).<br \/>\nLine 17 uses the <a href=\"http:\/\/api.jquery.com\/css\/#properties\">jQuery&#8217;s built-in CSS function<\/a> to set the new height and width for the image.<\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content --><p class=\"wp-flattr-button\"><a href=\"https:\/\/adeelejaz.com\/blog\/?flattrss_redirect&amp;id=45&amp;md5=c0821fe91b249d8c0d7c917283971ebb\" title=\"Flattr\" target=\"_blank\"><img src=\"https:\/\/adeelejaz.com\/blog\/wp-content\/plugins\/flattr\/img\/flattr-badge-white.png\" srcset=\"https:\/\/adeelejaz.com\/blog\/wp-content\/plugins\/flattr\/img\/flattr-badge-white.png, https:\/\/adeelejaz.com\/blog\/wp-content\/plugins\/flattr\/img\/flattr-badge-white@2x.png 2xhttps:\/\/adeelejaz.com\/blog\/wp-content\/plugins\/flattr\/img\/flattr-badge-white.png, https:\/\/adeelejaz.com\/blog\/wp-content\/plugins\/flattr\/img\/flattr-badge-white@3x.png 3x\" alt=\"Flattr this!\"\/><\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<!-- AddThis Advanced Settings generic via filter on wp_trim_excerpt --><!-- AddThis Share Buttons generic via filter on wp_trim_excerpt --><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-45","post","type-post","status-publish","format-standard","hentry","category-jquery-image-resize-plugin"],"_links":{"self":[{"href":"https:\/\/adeelejaz.com\/blog\/wp-json\/wp\/v2\/posts\/45","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/adeelejaz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/adeelejaz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/adeelejaz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/adeelejaz.com\/blog\/wp-json\/wp\/v2\/comments?post=45"}],"version-history":[{"count":3,"href":"https:\/\/adeelejaz.com\/blog\/wp-json\/wp\/v2\/posts\/45\/revisions"}],"predecessor-version":[{"id":49,"href":"https:\/\/adeelejaz.com\/blog\/wp-json\/wp\/v2\/posts\/45\/revisions\/49"}],"wp:attachment":[{"href":"https:\/\/adeelejaz.com\/blog\/wp-json\/wp\/v2\/media?parent=45"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/adeelejaz.com\/blog\/wp-json\/wp\/v2\/categories?post=45"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/adeelejaz.com\/blog\/wp-json\/wp\/v2\/tags?post=45"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}