<style type="text/css">
div.resized_image p {
margin: 2px;
margin-top: 0;
font-size: 8px;
/* Awesome icon from here: http://www.famfamfam.com/lab/icons/silk/ */
background: url(http://i242.photobucket.com/albums/ff244/9861_omikron/error.png) no-repeat;
padding-left: 20px;
color: #333;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
(
function(maxht, maxwt, minht, minwt) {
var imgs = document.getElementsByTagName('img');
// Image resizing function
var resize_image = function(img, newht, newwt) {
img.height = newht;
img.width = newwt;
$(img).wrap('<table><tr><td class="tborder"><div class="resized_image"><a href="' + img.src + '" target="_blank"></a></div></td></tr></table>');
$(img).parent().before('<p>NOTE: This image was resized. To view it full-size, click on the image.</p>');
$(img).parent().after('<p style="text-align:right;background:none;margin:0;padding-right:3px">Image resizing script by <a href="http://aetus.net/217/programming/automatically-resize-large-images-with-javascript/">Aetus Designs</a>.</p>');
};
for (var i = 0; i < imgs.length; i++) {
// Set a variable for the current image to make the code make more sense.
var img = imgs[i];
if (img.height > maxht || img.width > maxwt) {
// Use Ratios to constraint proportions.
var old_ratio = img.height / img.width;
var min_ratio = minht / minwt;
// If it can scale perfectly.
if (old_ratio === min_ratio) {
resize_image(img, minht, minwt);
}
// We need to do some magic now.
else {
var newdim = [img.height, img.width];
// Sort out the height first.
newdim[0] = minht;
// The logic behind this is that if ratio = ht / wt, then wt = ht / ratio.
newdim[1] = newdim[0] / old_ratio;
// Do we still have to sort out the width?
if (newdim[1] > maxwt) {
// Just do what we did with the height
newdim[1] = minwt;
newdim[0] = newdim[1] * old_ratio;
}
// So yeah, resize the image
resize_image(img, newdim[0], newdim[1]);
}
}
}
}
)(500, 500, 500, 500);
});
</script>
