SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2003
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript To Resize Images

    I know there's a way to resize images based on screen resolution. But I really need a VERY simple way to resize images based on how big the image itself is. Something that says "if THIS image is larger than 300, then resize to be 300".

    I've managed to do this to EVERY image on a page, but I want to affect only certain images which are uploaded by users to my site without affecting images in my site's layout.

    Thanks in advance for any suggestions.

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It would be better to do this with a server side language like PHP than to do it with JavaScript.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2003
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I don't want to use GD Libraries or anything like that. I just want a quick and dirty resize. The script I've already tried is like, two lines of Javascript. I was thinking that it would be really simple. I just don't know a lot about JS to do it myself.

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.google.com/search?q=JavaScript+resize+image

    If you used GD then you could save bandwidth by only sending a small version of the image except for when you wanted to send the full sized image.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2003
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's not my bandwidth that's being used. Actually, these images are remotely hosted and are simply what the users post in their posts. So, basically, I just need to have the user's browser resize them on the viewing end.

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So the only thing you care about is maintaining your layout?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  7. #7
    SitePoint Enthusiast
    Join Date
    Jan 2003
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Exactly! and I used this which is an excerpt from a script that was designed to do just that:

    Code:
     
    <script language="javascript" type="text/javascript"> 
     <!-- 
     function resize_images() 
     { 
     for (i = 0; i < document.images.length; i++) 
     { 
     while ( !document.images[i].complete ) 
     { 
     break;
     } 
     if ( document.images[i].width > 550 ) 
     { 
     document.images[i].width = 550; 
     } 
     } 
     } 
     //--> 
     </script>
     
    But, my header image was also affected because it is 680px, which is larger than the limit in above code. That's why I was simply trying to tweak it to work inline instead of using head code. Something like <img onload="javascript:if()">

  8. #8
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Am I missing something here?

    Scripters like to get elements by ID but are you not going over the top?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    .imgdiv{
    top:0px;
    left:0px;
    width:10%;
    }
    </style>
    </head>
    <body>
    <p><img src="or.jpg" width="10%" alt="" /></p>
    <div class="imgdiv"><img src="or.jpg" width="100%" alt="" /></div>
    </body>
    </html>

  9. #9
    SitePoint Enthusiast
    Join Date
    Jan 2003
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The CSS/DIV method isn't what I'm looking for because I only want to decrease the size of images that are LARGER than my layout. Not ALL images in the site.

  10. #10
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,499
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    did this for another forum, also preloads before display, easily modified

    PHP Code:

     
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"
    >

    <
    html>

    <
    head>
      <
    title></title>
    <
    script language="JavaScript" type="text/javascript">
    <!--

    var 
    SRCAry=new Array();
    var 
    MyImgWidth=300;

    function 
    changeImage(filename){
     for (
    i=0;i<SRCAry.length;i++){
      if (
    SRCAry[i].src==filename){
       
    document.getElementById('mainimage').src SRCAry[i].src;
       if (
    SRCAry[i].width>MyImgWidth){
        
    document.getElementById('mainimage').width=MyImgWidth;
        
    document.getElementById('mainimage').height=MyImgWidth*SRCAry[i].height/SRCAry[i].width;
       }
       return;
      }
     }
     
    SRCAry[SRCAry.length]=new Image();
     
    SRCAry[SRCAry.length-1].onload=function(){ changeImage(this.src); }
     
    SRCAry[SRCAry.length-1].src=filename;
    }



    //-->
    </script>

    </head>

    <body>

    <select name="fred" size="1" onchange="changeImage(this.options[this.selectedIndex].value);" >
    <option value="http://www.vicsjavascripts.org.uk/StdImages/One.gif">Image1</option>
    <option value="http://www.vicsjavascripts.org.uk/StdImages/Two.gif">Image1</option>
    <option value="http://www.vicsjavascripts.org.uk/StdImages/Three.gif">Image1</option>
    </select>

    <img id="mainimage" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width=300 >


    </body>

    </html> 

  11. #11
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    this uses a class so working on the img / div you want to resize
    it makes a img 1px x 1px with 10% of screen
    it makes a img 1600px x 1600px 10% of screen

    you can also set the width of the div to 200px making all pictures 200px width

  12. #12
    SitePoint Enthusiast
    Join Date
    Jan 2003
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by all4nerds
    Hello

    this uses a class so working on the img / div you want to resize
    it makes a img 1px x 1px with 10% of screen
    it makes a img 1600px x 1600px 10% of screen

    you can also set the width of the div to 200px making all pictures 200px width
    I have a fixed width layout. So the image sizes are not dependent on the screen, they're dependent on my layout. While changing the width by a percentage of screen could possibly work, the images would be malproportioned since the height is not mentioned.

    All posted images are from remote sites and all have different proportions. That's why I am attempting this with javascript.

  13. #13
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Yes, use your layout, the img width100%=the width of your div (or P)

    You always have to let the height free floating, or clip.

  14. #14
    SitePoint Enthusiast
    Join Date
    Jan 2003
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried the CSS/DIV approach and width="100%" made my smaller images stretch to be the size of the div. And without the width, it just didn't work.

    I guess I wasn't concentrating enough. I finally got the very simple approach I was going for
    Code:
    
    <!-- BEGIN img --><img src='{URL}' border='0' onload="javascript:if(this.width > 350)this.width = 350"/><!-- END img -->
    
    
    Mind you, it DOESN'T resize before load, but for the simple approach, that's ok by me.

    Thanks for all you contributions.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •