Welcome Guest [Log In] [Register]
Search Members Calendar | Rules ZB Code Index IF Code Index
ZBCode
  • Navigation
  • ZBCode
  • Coding Resources
  • Other Forum Systems
  • Viewing Single Post From: [smf] Automatically Resize Large Images
Viewing Single Post From: [smf] Automatically Resize Large Images
Celebrus May 28 2009, 08:33 AM
Member Avatar
Artificially Conscious

Posts:
16
Group:
Member
Member
#300
Joined:
Jul 26, 2008
Coding language
Everything
I've tweaked that code a bit to get it to fit in a bit and display a message. You can find a preview of it here.

You can put this in either you headers or your footers. You may have to edit the colors in the CSS on top if you are using a custom theme.

Also note that the icon that is displayed is from the silk icon set from famfamfam.com which is licensed under a Creative Commons Attribution 2.5 License.

Code:
 

<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>


If you want to adapt this to fit with another forum system, you might want to look here: Image Resizing Script.
Edited by Celebrus, May 28 2009, 08:34 AM.
Posted Image
Offline Profile Quote Post
[smf] Automatically Resize Large Images · Other Forum Systems
Time: 6:24 PM Sep 9
Hosted for free by ZetaBoards