Category Archives: Code
Jul 22 2011

Code: Dynamic Image Resize w/ jQuery

CATEGORY:

Code, Tips & Tricks Add a Comment (2) »

Something new for everyone, programming and code examples. Since I do a lot of programming during the day, sometimes writing 1,000+ lines of code a week, I thought I would start sharing some code that could be helpful for photographers. If you have any questions in regards to your website, post a question over in our discussion section on our Facebook page! Halladay Photography – Programming Questions

If you follow us frequently you will have noticed that we’ve made some improvements to our website. One of our upgrades included adding a sidebar. As a result of this, all of my images for all of my posts are now too big and will overlap the sidebar. Most people’s first reaction might be to go back and resize all of your images. Check out this code to do that on the fly, so you don’t have to waste a whole day watching Photoshop run an action on your hundreds of images.

First you have to start by using jQuery. You can easily add the jQuery API by using Google’s API server. Add the following code in your <head></head> section.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript">
function resizeImages(image_id, max_size)
{
	$(image_id).each(function(i) {
		if ($(this).height() < max_size && $(this).width() < max_size)
		  	return;

		if ($(this).height() > $(this).width()) {
		    var h = max_size;
		    var w = Math.ceil($(this).width() / $(this).height() * max_size);
		} else {
		    var w = max_size;
		    var h = Math.ceil($(this).height() / $(this).width() * max_size);
		}
		$(this).css({ height: h, width: w });
	});
}
</script>

You can then just call the resizeImages() function from anywhere within javascript code. I would recommend calling this function in the $(document).ready function, as this will cause the images to be resized once they have been loaded. For example, all of my post entries have a class assigned to the containing DIV called ‘entry’. Therefore my code to find all the images that are contained within one of my entries and resize them to a max size of 650px is…

$(document).ready(function() {	resizeImages(".entry img", 650); });

I hope you’ve found this helpful. If you need anymore help with jQuery syntax you can visit http://jquery.com/ or leave a comment below.

CATEGORY:

Code, Tips & Tricks Add a Comment (2) »