[javascript]
$(window).load(function() { /* Must use window.load because it fires once the images are FULLY LOADED so we can grab their pixel dimensions. */
var contentWidth = 900; /* Content width must be arbitrary number. Cannot be created dynamically based on browser window size or it will mess up calculations below. */
$("#container img.resize").each(function(){ /* Normal responsive image resize */
var ratio = $(this).width()/contentWidth;
//alert($(this).width());
$(this).wrap("
");
//alert(ratio*100);
});
$("#container img.resize-left").each(function(){ /* Responsive image resize floated to the left */
var ratio = $(this).width()/contentWidth;
//alert($(this).width());
$(this).wrap("
");
//alert(ratio*100);
});
$("#container img.resize-right").each(function(){ /* Responsive image resize floated to the right */
var ratio = $(this).width()/contentWidth;
//alert($(this).width());
$(this).wrap("
");
//alert(ratio*100);
});
$("#container img.resize-center").each(function(){ /* Responsive image resize with centered image*/
var ratio = $(this).width()/contentWidth;
//alert($(this).width());
$(this).wrap("
");
//alert(ratio*100);
});
$("#content img").css( "max-width", "100%" ); /* Setting #content img { max-width:100% } in the CSS makes all images scale to 100% of the current size of the #content div. Must be set via jQuery instead. (I think???) */
});
[/javascript]