javascript controlling images

[jpmoriarty]

I've tried this in the graphics forum without much luck, so thought I'd throw it to the java monkies to see what can be done (no offence intended!):

I'm using a java script image gallery thing that scrolls through some images on my page. Nice and simple, works well, and I'm not too bothered about the non javascript views who cant see it since it's hardly a matter of life and death, and if they dont want to use the bloomin' technlology that someones taken the time to invent then that's up to them.

ahem

anyway, the problem is that as it scrolls through the images, I would love it if I had some way of checking what width the image that's about to be displayed is. Then, if it saw that the image was over 360, for example, it set the width of the image to 360 so that it got scaled down. i dont want to have to tell it the dimensions of every image using the width/height commands, and nor do i want EVERY image to display at 360 width - if it's slimmer than that then I'm quite happy for it to stay that way. It's just for the ones that are bigger than 360 that will mess up my tables, they're the ones that I want scaled down so that they fit.

Am I being far too optimistic with this, would I need an applet, or is it just not possible at all?

help me java-script guru's, you're my only hope...

[Rick Bull]

It's do-able, but without seeing your code I can't really help much. But what I would do, instead of checking the images as it is coming into focus, is just loop through them all at the start, and check/set their size then.

[jpmoriarty]

The java I'm using preloads the images so that it can scroll through them when the user clicks on the "next image" button. Is there code that i can put into an if cycle along the lines of;
If image.width>360 then
image.width=360
else
image.width=image.width

or something like that?

[Rick Bull]

Something like this should work:


if (image.width>360)
image.width=360;


(you don't need the else bit though, as it's not changing any values). Again if you need more specific code you'll have to provide the HTML/JavaScript you already have.

[jpmoriarty]

Ah so I wasn't too far off then! Where would I put that into my code? I cant put it in with the img handles since the dimensions for each image are different. And can I use image.width even though I havent defined it as a variable? Is it just recognised by java? Do I put it in with each images entry in the preloading list? And actually surely I cant use
a '>' sign since the HTML will think that I'm trying to put some markup in?

[Rick Bull]

That's a lot of questions ;) You should be able to use image.width even if you haven't set the attribuets according to DOM 2 at least. You can use >, according to the HTML 4.01 specs, you can use > (as long as you have comments around the <script> elements) but not </, you need to escape them, e.g.


<script type="text/javascript"><!--
document.write('<p>Blah<\/p>')
//--></script>


And as for referring to the images there are several ways to do it. Probably the way I would do it would be to give all your img tags an ID, starting with a string like "thumb_", then loop through all images on the page, if they have that at the start then set the width. I'll try to put together a script for you.

[Rick Bull]

OK, try something like this:


<script type="text/javascript"><!--
function setImageSize() {
//"Constansts"
var thumbPrefix = "thumb_"; //What's before thumbnail's IDs
var maxWidth = 360, maxHeight = 360; //Max size of thumbnails
//If we can access the images
if (document.images) {
//Loop for all images
for (var loopCounter = 0; loopCounter < document.images.length; loopCounter++) {
//If this one starts with thumbPrefix
if (document.images[loopCounter].id.substring(0, thumbPrefix.length) == thumbPrefix) {
//If this one is too wide, shrink it
if (document.images[loopCounter].width > maxWidth)
document.images[loopCounter].width = maxWidth;
//Same for height
if (document.images[loopCounter].height > maxHeight)
document.images[loopCounter].height = maxHeight;
}
}
}
}
//--></script>
</head>

<body onload="setImageSize();">
<p>
<img id="thumb_1" src="thumb_one.png" alt="" />
<img id="thumb_2" src="thumb_2.png" alt="" />
<img id="thumb_3" src="thumb_3.png" alt="" />
<img id="thumb_4" src="thumb_four.png" alt="" />
</p>


You will have to set an (invidual) ID on each image starting with "thumb_". You can also change it to check the src attribute, just that I had that before, but the full filename gets returned, so it doesn't work, but it maybe OK online.