getting image file size (ht & wdth)

Forum Moderators: open

Message Too Old, No Replies

getting image file size (ht & wdth)

sssweb

7:59 pm on Mar 7, 2006 (gmt 0)

I have a javascript slideshow script and want to specify image height & width for the various images. Is there a way to pull that out of the image variable each time the script calls it (e.g. image[1], image[2], image[3], etc.)?

DrDoc

8:38 pm on Mar 7, 2006 (gmt 0)

Have you tried:
image[1].height
image[1].width

;)

sssweb

9:13 pm on Mar 7, 2006 (gmt 0)

Thanks doc -- as you can see, I know nothing about js(!)

Is there a way to use that to limit the size of the image that's displayed? I want to display the image at full size up to a point, say width="100". For any pic bigger than that, I want to display it at width="100".

My script prints out the HTML using this variable (I've added in your suggestion, as I understand it):

imagehtml='<img src="'+image[0]+'" width="'+image[0].width+'" alt="">

Fotiman

9:41 pm on Mar 7, 2006 (gmt 0)

Maybe something like this:

imagehtml='<img src="'+image[0]+'" width="'+(image[0].width<100)?image[0].width:100+'" alt="">

I haven't actually tried it, but I think that's what you're looking for.

sssweb

11:17 pm on Mar 7, 2006 (gmt 0)

I get "undefined" for a result with that.

sssweb

2:02 pm on Mar 8, 2006 (gmt 0)

I found a php solution for this that seems to work, so I'm going with that. Thanks for everyone's help.

sssweb

9:29 pm on Mar 8, 2006 (gmt 0)

I found out the PHP fix won't do, so I'm back to trying this with javascript.

Below is my script. What is the easiest way to get images under 100px wide to display at full size, and anything over 100px to display at 100px?

------

function returnimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'">'
imghtml+='<img src="'+theimg[0]+'">'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}

function modifyimage(loadarea, imgindex){
if (document.getElementById){
var imgobj=document.getElementById(loadarea)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()
}
imgobj.innerHTML=returnimgcode(dynimages[imgindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}
}
//-->
</script>

Fotiman

9:55 pm on Mar 8, 2006 (gmt 0)

You need to create an Image object. This may help you understand:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset:utf-8"> 
 <title></title> 
 <script language="JavaScript" type="text/javascript"> 
<!-- 
//Specify image paths and optional link (set link to "" for no link): 
var dynimages=new Array() 
dynimages[0]=["./image00.jpg", ""] 
dynimages[1]=["./image01.jpg", ""] 
function returnimgcode(theimg) 
{ 
 var imghtml=""  
 if (theimg[1]!="") 
  imghtml='<a href="'+theimg[1]+'">'  
 var img = new Image(); 
 img.src = theimg[0];   
 imghtml+='<img src="'+theimg[0]+'" width="'+img.width+'" height="'+img.height+'">'  
 if (theimg[1]!="") 
  imghtml+='</a>' 
 return imghtml 
} 
//--> 
</script>  
</head> 
<body> 
<div id="container"> 
<script type="text/javascript"> 
for( var i = 0; i < dynimages.length; i++ ) 
{ 
 alert( returnimgcode(dynimages[i]) ); 
} 
</script> 
</div> 
</body> 
</html>

sssweb

1:21 am on Mar 9, 2006 (gmt 0)

Thanks VERY much -- that did the trick.