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?"
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.
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>
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,
Reply With Quote
Bookmarks