SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    resize images on load

    trying to resize images based on their hxw so I'm not stretching out tall pictures with css. What am i doing wrong here?

    Code JavaScript:
    resizePics = function()
    {
       rsRoot = document.getElementById("resize");
       for (i=0; i<rsRoot.childNodes.length; i++)
       {
         node = rsRoot.childNodes[i];
         if (node.className=="preview")
         {
           node.onload=function()
           {
            this.height = this.height * .5
            this.width = this.width * .5
           }
         }
       }
    }
     
    window.onload=function(){
       resizePics();
    }

    Code HTML4Strict:
    <tr>
     <td align="center" id='resize'>
      <ul class='hoverbox'>
        <li ><a href='showpicture.php?id=69&n=1&t=main'><img src="pics/69/main/1-thumb.jpg" /><img class='preview' src='pics/69/main/1.jpg'/></a> </li> 
        <li ><a href='showpicture.php?id=69&n=3&t=main'><img src="pics/69/main/3-thumb.jpg" /><img class='preview' src='pics/69/main/3.jpg'/></a> </li> 
      </ul>
     </td>
    </tr>
    Last edited by joejoeknows; Jul 5, 2007 at 13:45.

  2. #2
    Non-Member
    Join Date
    Aug 2006
    Location
    Kansas City
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    semicoln?

    this.height = this.height * .5;
    this.width = this.width * .5;

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i wish it were that easy. I'm pretty sure js doesnt require semicolons, but I added them anyways and still no luck. I think it has to do with how I'm traversing the nodes in "node = rsRoot.childNodes[i]", does childNodes reference all children and their children or just the children of that node?

  4. #4
    Non-Member
    Join Date
    Aug 2006
    Location
    Kansas City
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bear with me, Im also new at this.

    Would it matter if you do:

    for (var i=0; i<rsRoot.childNodes.length; i++)

    Declaring "var" for the increment?

  5. #5
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm guessing you've already dealt with this... but just not to overlook the obvious.

    If I read this right, you're creating a half size preview by resizing a full image? At that point you've already made the visitor download the whole image so why bother with a preview? Why can't they just have the whole thing?
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, this "preview" is on a rollover event and the full size image is taking up half the screen on lower resolutions. I can style it to half size, but then the aspect ratio is messed up on certain photos. I was thinking about just converting the photos to a smaller version, but I want to keep the full size for click events. Will this take too much processing time on the clients machine?

    Heres another failed attempt at js:
    I noticed the screen went blank for a sec on refresh with this script, is that because of "document.getElementsByTagName('IMG')"?
    Code JavaScript:
    resizePics = function()
    {
      imgs = document.getElementsByTagName('IMG')
       for (i=0; i<imgs.length; i++)
       {
         node = imgs[i];
         if (node.className=="preview")
         {
           node.onload=function()
           {
            var ht = this.height * .5;
            var wh = this.width * .5;
            this.style = 'height:'+ht+';width:'+wh
           }
         }
       }
    }
     
    window.onload=function(){
       resizePics();
    }

  7. #7
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aaaaaaah. Wow, that is nasty. The "solution" to that would be to create an intermediate "snapshot" that is half size. But that would mean a whole extra version of every one of your pictures that you'd have to resize, store on your server, AND make your visitor download. This way you only need the one version of the image and though it loads really slow, you've taken the hit downloading the image right there. If people decide to click through, they've already got the whole image. Catch 22, but I guess if I were in your position, I might do it this way too. Large images are just a pain to work with.

    This probably also falls under the category of stupid questions, (I can't help it, I'm so good at them ).

    Here are a couple quick checks. One, try using 0.5 instead of just .5, Two try dividing by 2 instead of multiplying by decimal. Three, javascript can be forgiving about semicolons, but CSS isn't as nice. I think your this.style needs to include a final semicolon...

    Code:
    this.style = 'height:'+ht+';width:'+wh+';'
    I do think your getting closer, but then I'm not a browser so you shouldn't care what I think.

    Another things you could do, purely for testing, is you can assign the style to a variable so you can check it before you assign it to this.style. e.g.

    Code:
    var strStyle = 'height:'+ht+';width:'+wh+';'
    alert(strStyle);
    this.style = strStyle;
    That'd let you confirm that the style string is really being written the way you want before it's included, e.g. in case ht and wh aren't being calculated the way you expect.

    If that doesn't work, come back with the code from one of your pages, so we can set up our own mockup of what your working with and hopefully see it fail the exact same way you do. Maybe that will kick loose a cobweb or two in the old noggin. Here's hoping some of my brilliant advice fixes things and you don't have to bother.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  8. #8
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well, I was using a php script to load these images in the first place and i found a forum talking about resizing in php. thats when it clicked, I dont need to resize these things at all, just use the height and width attributes of the image and the getimagesize() php function. So what i did was get the image height and width, divide by my resize ratio, and output the new h and w in the image tag. I stopped working on the jscript, but thanks for the tips on the alert for variable output. I find it really hard to debug javascripts.

  9. #9
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm glad you got it working with PHP. Yeah, debugging is a pain. I brutalize alerts when I'm trying to debug a javascript problem. When you're debugging in a browser they're a really flexible way to display just about any info you want to know about out of your functions.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.


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
  •