jQuery Image Scale Script for WordPress. Set the maximum width of images in your posts!
October 4th, 2009 — Blog Post, Wordpress
Tonight, I was struggling trying to make an image resize dynamically on one of my WordPress sites based on a maximum image width. I thought I would try out some script with jQuery, since WordPress includes it in the core code. Below you will find the code that I used to make it happen, which is based on this article.
Note: This will conflict with the Featured Content Gallery plugin (and probably others, too!). Please let me know if you figure out how to get it working with that plugin! 
Enjoy!
First, make sure you initialize jQuery by calling the following function BEFORE the “wp_head();” function:
<?php wp_enqueue_script("jquery"); ?>
Second, paste the following code AFTER the “wp_head()” function call:
<script type="text/javascript"> var $j = jQuery.noConflict(); $j(document).ready(function(){ //Configuration Options var max_width = 280; //Sets the max width, in pixels, for every image var selector = 'img'; //Sets the syntax for finding the images. Defaults to all images. //For images inside of a particular element (id="abc") or class (class="abc"), //use '.abc img' or '#abc img' respectively. Don't leave off the img tag!!! //End configuration options. You don't need to change anything below here. $j(selector).each(function(){ var width = $j(this).width(); var height = $j(this).height(); if (width > max_width) { //Set variables for manipulation var ratio = (height / width ); var new_width = max_width; var new_height = (new_width * ratio); //Shrink the image and add link to full-sized image $j(this).height(new_height).width(new_width); $j(this).hover(function(){ $(this).attr("title", "This image has been scaled down. Click to view the original image.") $(this).css("cursor","pointer"); }); $j(this).click(function(){ window.location = $j(this).attr("src"); }); } //ends if statement } //ends each function ); }); </script>
I’m confused, but impressed! Thanks for sharin’…*kirk
@Kirk – You aren’t alone! This stuff is pretty complex. Thankfully, most of the cool code is available for copy-and-pasting.
Thanks a lot m8, been searching for a while on how to set the max size of my images, this one worked like charm, kudos
.