www.webdeveloper.com
Results 1 to 5 of 5

Thread: Dynamic Image Resize

  1. #1
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    868

    Dynamic Image Resize

    Hello everyone. I have a nice little slideshow script. The problem with this is, not every image used is the same size. Some are the nice squares(or actually just like moniters, slightly rectangles), and there are some that are long rectangles, some that are just small(don't want to stretch them).

    Rather than just leave everything at the default size, I need them resized since some images are very large and would not fit in the 'box' for my slideshow. Others are small and get stretched.


    So is there some way to check an image size. If it is greater than a size(the demensions of my box), I resize it down to the size of my box(which is what I do with all images now), but if it is smaller, I can simply leave the image size alone and let it use the defaults for that image.

    It would be great if there were some way to do this. I can't go in and resize every image I am using since this is for a client.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  2. #2
    Join Date
    Aug 2005
    Location
    Universe #384918862154 - third door on the left
    Posts
    236
    For any given IMG element there are 2 properties that tell you the original size of the image specified by the src property: naturalWidth and naturalHeight.
    If your container stretches when the window is resized then you can find out how big it is with the offsetWidth and offsetHeight properties.
    I'm that kid who cracked RSA.

  3. #3
    Join Date
    Aug 2006
    Posts
    286
    well super, i came up with the following.........but can anybody help me with this please ?? why is the first image not showing up at all, until second time around in slide show ?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    
    <meta http-equiv="Content-Language" content="en-us" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>script start</title>
    
    <script type="text/javascript">
    
    //put main img tag name where 'shepard' is 
    
    var count = 0 
    var imgWidth = 400 //put width size here that you wish to down size large images too 
    var showSpeed = 2 //put number in seconds here for changing image speed
    var thisImg = new Image()
    var thisImg = new Array("shep.jpg","IMGP1796.JPG","IMGP1784.JPG")
    
    
    function slideShow(){
    
    document.images.shepard.src = thisImg[count]
    
    if(document.images.shepard.naturalWidth > imgWidth)
    document.images.shepard.width = imgWidth 
    else 
    document.images.shepard.width = document.images.shepard.naturalWidth 
    
    if(count < thisImg.length-1)
    count++
    else
    count = 0
    
    setTimeout('slideShow()', showSpeed * 1000)
    
    }
    
    </script>
    
    
    </head>
    
    <body  >
    
    <div style="display:none;">
    
    <img alt="gene shepard"  src="shep.jpg" />
    <img alt="benley's band 1" src="IMGP1796.JPG" />
    <img alt="benley's band 2" src="IMGP1784.JPG" />
    
    </div>
    
    
    <p>
    <img alt="gene shepard" src="shep.jpg" name="shepard"  /></p>
    
    <script type="text/javascript">
    
    slideShow()
    
    </script>
    
    </body>
    
    </html>

  4. #4
    Join Date
    Aug 2006
    Posts
    286
    well i created a solution to my previous problem, a workaround that i am not sure why it works, but it does,

    just put this javascript code into the body, instead of the previous code i created for the body, and the slide show will essentianlly start right away, and the first slide will show fine,

    i created this setTimeout property 'setTimeout('slideShow()',10)' in the body javascript code,

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    
    <meta http-equiv="Content-Language" content="en-us" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>script start</title>
    
    <script type="text/javascript">
    
    //put main img tag name where 'shepard' is 
    
    var count = 0 
    var imgWidth = 400 //put width size here that you wish to down size large images too 
    var showSpeed = 2 //put number in seconds here for changing image speed
    var thisImg = new Image()
    var thisImg = new Array("shep.jpg","IMGP1796.JPG","IMGP1784.JPG")
    
    function slideShow(){
    
    document.images.shepard.src = thisImg[count]
    
    if(document.images.shepard.naturalWidth > imgWidth)
    document.images.shepard.width = imgWidth 
    else 
    document.images.shepard.width = document.images.shepard.naturalWidth 
    
    if(count < thisImg.length-1)
    count++
    else
    count = 0
    
    setTimeout('slideShow()', showSpeed * 1000)
    
    }
    
    </script>
    
    
    </head>
    
    <body >
    
    <div style="display:none;">
    
    <img alt="gene shepard"  src="shep.jpg" />
    <img alt="benley's band 1" src="IMGP1796.JPG" />
    <img alt="benley's band 2" src="IMGP1784.JPG" />
    
    </div>
    
    
    <p>
    
    <img alt="gene shepard" src="shep.jpg" name="shepard"  /></p>
    
    <script type="text/javascript">
    
    setTimeout('slideShow()',10)
    
    </script>
    
    </body>
    
    </html>
    also, i want to mention, thanks to 'wisest guy' for the naturalWidth and naturalHeight properties,

    please let me know of any questions super,

  5. #5
    Join Date
    Aug 2006
    Posts
    286
    please delete
    Last edited by changintimes; 11-27-2007 at 12:30 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles