October 21, 2018, 04:26:12 pm
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Welcome to Revolution X, where Coding meets Graphics.
 
  Home Help Search Arcade Affiliates Staff List Calendar Members Login Register  

Automatically Resize Large Images

Pages: [1]   Go Down
  Print  
Author Topic: Automatically Resize Large Images  (Read 421 times)
Celebrus
Artificially Conscious
Administrator
Adminitrator
Offline Offline

Gender: Male
Posts: 626



View Profile WWW
Badges: (View All)
« on: May 24, 2009, 02:46:00 am »

Original Image Resizing Script

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 large images aren't common on your forum, then the small credit line at the bottom of resized images wouldn't be very intrusive. If you don't want it there and would prefer, say, a link in your footers, send me a PM or (preferably) an email.
« Last Edit: September 27, 2009, 02:30:57 am by Celebrus » Report Spam   Logged

Social Buttons

Agent Moose
Administrator
Adminitrator
Offline Offline

Gender: Male
Posts: 1,470



View Profile WWW
Badges: (View All)
« Reply #1 on: May 24, 2009, 01:32:50 pm »

Very cool!  I tried making a code like this forever ago, but it didn't work Tongue

Good job Smiley
Report Spam   Logged


Mojobojo82
MVP
MVP
Offline Offline

Gender: Male
Posts: 838


View Profile
Badges: (View All)
« Reply #2 on: June 17, 2009, 05:41:55 am »

Nice code... Always wondered how they done it on runelocus.  Azn
Report Spam   Logged






el mafioso
Exclusive
Exclusive
Offline Offline

Posts: 553


SOTW 1st Champion


View Profile
Badges: (View All)
« Reply #3 on: June 17, 2009, 01:51:51 pm »

I like this one sometimes you don't want to resize the image by using a prgram or somethig like that so that it would fit with this one you don't have to.
Report Spam   Logged

Pages: [1]   Go Up
  Print  
 
Jump to:  

Powered by EzPortal
Bookmark this site! | Upgrade This Forum
SMF For Free - Create your own Forum | Buy traffic for your forum/website

Powered by SMF | SMF © 2016, Simple Machines
Privacy Policy