Image shape problem with slideshow

[Sulkyrob]

The following code works fine for a slideshow of images if they are all the same size - but if they vary either landscape to portrait or vica versa etc then the second image retains the width and height of the first image which looks bad! I assume the javascript needs some additional code to check for size and modify the space allocated for the image appropriately - but I need help to find this solution please?

Head code

<script LANGUAGE="JavaScript">
<!-- Begin
NewImg = new Array (
"images/Landscape.jpg",
"images/Portrait.jpg",
);
var ImgNum = 0;
var ImgLength = NewImg.length - 1;
var delay = 6000;
var lock = false;
var run = setInterval("chgImg(1)", delay);
var lock = true;
function chgImg(direction) {
if (document.images) {
ImgNum = ImgNum + direction;
if (ImgNum > ImgLength) {
ImgNum = 0;
}
if (ImgNum < 0) {
ImgNum = ImgLength;
}
document.slideshow.src = NewImg[ImgNum];
 }
}
function auto() {
if (lock == true) {
lock = false;
window.clearInterval(run);
}
else if (lock == false) {
lock = true;
run = setInterval("chgImg(1)", delay);
 }
}
</script>

Body code

<img border="0" src="images/Landscape.jpg" name="slideshow">

Please, any help would be appreciated...

[rocknbil]

I know of no solution using JS/Ajax that gets the image size. What you will (probably) need to do is supply JS the width and height in an array OR some other element and when you change images, assign the width and height accordingly.

For example, in a different scenario, you have a link to "preview selected image" next to a select list of images. The select list has options like this:

<option value="some-image.jpg:300:400">some-image.jpg</option>

OnClick of the preview link, JS would get the value of the selected option, split on the colons, and assign the width and height to the target display image.

[Sulkyrob]

I have tried including the width and height information in the array already used to identify the images - but this doesn't work.
If I need a second array for all the width and height information - how do I include it in the code and how do I get the JS to look for it at the right time?
Please forgive my lack of expertise in using JS - I'm very early in the learning curve and having used other people's JS slideshow code isn't necessarily the best way to learn how it works.

[daveVk]

Is than any CSS involved with page that sets image size ?

[Sulkyrob]

The body code that is relevant:-

<img border="0" src="images/Landscape.jpg" name="slideshow">

is embedded inside a table which has cell dimensions set to cope with maximum image size in either direction.

I have not used any CSS currently.

[rocknbil]

My head's a bit fuzzy, been a long day . . . but this snippet might help.

First you need to start using id to reference your images instead of name.

<img border="0" src="images/Landscape.jpg" name="slideshow" id="slideshow">

Then I'm not sure where you'll add this, but pass the width, height, url, and id to the function that assigns the images to the object.

function swapImg(id,url,w,h) { 
var obj = document.getElementById(id); 
 if (obj) { 
 obj.width=w; 
 obj.height=h; 
 obj.src=url; 
} 

[Sulkyrob]

I see some light but it is still a long tunnel ahead!
There is already in the code:-

function chgImg(direction)

Is your

function swapImg(id,url,w,h)

effectively the same as my

function chgImg(direction)

to which I just add the id,url,w,h - thus making it

function chgImg(direction,id,url,w,h)

and if so where do I then add

var obj = document.getElementById(id) etc.

or can I then include all the elements in the initial array separating each by a comma?

And given my array of images will be more than the 2 I've used in the example code of the first post and may have say 12 images in it and there may be multiple changes from landscape to portrait to landscape to portrait etc how do I then list all these w and h permutations?

I know its more questions than answers so far but I will continue to appreciate all the help coming my way...

[daveVk]

is embedded inside a table which has cell dimensions set to cope with maximum image size in either direction.

As a test move it outside of table, to see if table is part of problem.

[Sulkyrob]

Same problem whether in table or not!

The other factor I should have mentioned - this is only a problem with the live website. The mirror site I have on my hard-drive where I normally do all my changes and testing before publishing does not reproduce this problem. My host server is switched on to operate in a Microsoft Frontpage Server Extensions environment. So when I publish the version on my host server it has incorporated into the code a fixed width and height that I avoided putting in my side. When I delete this code and resave it in the live environment the problem doesn't go away and the code miraculously reappears when I next look. So, something that I can't see is taking image information and applying it to the slideshow image display area and reincorporating it into the code. Is this normal? And I presume I just have to live with that and find a solution that works in the live environment anyway!

[daveVk]

I would do a "save page" on whats coming from the live server and do some sort of file compare on it, such as winMerge. Hopefully that will narrow it down, could be to do with response headers but less likely. Also check there no missing file(s) on live server.

[Sulkyrob]

I've done a line by line comparison and both sides of the server are identical. And there aren't any missing files.
I've also done an edit and save on the server side not using Frontpage - and surprise, surprise it then works just fine with a change from landscape to portrait. I'll double check with a few additional tests but it now looks as though it is a peculiarity of Frontpage.
Having said that - there must still be a solution to the problem within the Frontpage environment I would think.
For now, whenever I publish changes using Frontpage I will then have to go into the file editor on the server side and manually change all the errors that Frontpage is creating. What a pain!