Resize Images in a Post with jQuery, and turn it into a plugin

If you own a blog, chances are you post pictures in your posts once in a while. Likewise, you have probably encountered the problem of resizing the images so that they fit in the post. Today’s tutorial will be in two steps:

First off, we will create a function that will handle all our code. We will also give this function one parameter, “el”. “El” will be the images that we will resize. In this case, ‘#post img’. [js] function resizeImages(el){

} [/js]

Now, we will use jQuery’s each() function to iterate over each image.

[js] function resizeImages(el){

$(el).each(function(){

});

} [/js]

Next, we have to figure out the max width that the pictures can be.

[js] function resizeImages(el){

$(el).each(function(){

var maxWidth = $(this).parent().width();

}); } [/js]

jQuery’s .parent() returns the current element’s immediate parent. So, the maxWidth variable is set to the post’s width.

Next, we have to find out the width and height of the images.

[js] function resizeImages(el){

$(el).each(function(){

var maxWidth = $(this).parent().width();

var imgWidth = $(this).width(); var imgHeight = $(this).height();

});

} [/js]

The reason we are using .width() and .height() instead of .css(“width”) and .css(“height”) is because when we use the .css() function, we also get the units tacked on. That won’t work out when we start to do the math.

Now, we calculate the new width and height of our current image. [js] function resizeImages(el){

$(el).each(function(){

var maxWidth = $(this).parent().width();

var imgWidth = $(this).width(); var imgHeight = $(this).height();

var newWidth = maxWidth;

var ratio = imgWidth/maxWidth;

var newHeight = imgHeight/ratio;

});

} [/js]

Let me explain. The new width will be the max width. Fairly self-explanatory. Now, in order to calculate the new height, we have to figure out the ratio between the old width and height. Hence, the ratio variable. We then set the new height by dividing the original height by the ratio.

Next is the easiest part. We give the current image its new width and height. [js] function resizeImages(el){

$(el).each(function(){

var maxWidth = $(this).parent().width();

var imgWidth = $(this).width(); var imgHeight = $(this).height();

var newWidth = maxWidth;

var ratio = imgWidth/maxWidth;

var newHeight = imgHeight/ratio;

$(this).css({ height: newHeight, width: newWidth, });

});

} [/js]

And last, but certainly not least, we initialise the function: [js] $(document).ready(function(){

resizeImages(‘#post img’);

}); [/js]

Ta-da! We now have a working function that resizes the images in a post. Read on to find out how to turn this into a plugin.

//Assign current element to variable, in this case is UL element var obj = $(this);

//Plugin code goes here

}); } }); })(jQuery); [/js]

This is a generic plugin starter template. You can use this for whatever you want. Credits to the guys over at Queness for this one.

Now, we just carefully copy-paste our function into this. We don’t actually have to copy-paste the function wrapper, since the plugin already provides us with a nice function to put our code in. We also don’t need our .each function either, since once again, the plugin already does that. [js] (function($){ $.fn.extend({ //plugin name – resizeimg resizeimg: function(options) {

You might also like...

Alexandre Smirnov is a web developer and designer who lives and works in California. He enjoys creating cool new stuff out of CSS3 and HTML5, and is convinced that Jquery is the meaning of life. He also regularly writes on his blog, DesignLunatic.com.