Blending Image Slide Show

[BLiZZaRD]

The Image Slideshow found here: http://dynamicdrive.com/dynamicindex14/image4.htm

I have used this before and I really like it. I have come to use it again, only this time I have more images. Not a problem as the script can handle it easily, but the problem is my images are a lot of different sizes.

If I make the window large enough to view the largest pic the smaller one get stretched and basically unviewable. Likewise If I set it to view the majority size the lage ones get "smooshed".

Is there something I can add to the script that will take the image size and automatically resize the view window to fit each pic?

If not, is there something else I can do/use? If it is another slideshow script I would need it to include captions for the pics that rotate with the pics like this one does.

Thanks!

~BLiZZ

[Twey]

You should use http://www.twey.co.uk/files/slide.html instead of that script. Mine actually works in multiple browsers.

It may even work with different image sizes -- I can't remember how I did it. If not, I'll rewrite a bit of it for you.

[BLiZZaRD]

Thanks Twey, I am looking now...

Comparing the two, I know you made some changes in the script somewhere, but I don't see where...

Should I just copy your source and paste it over mine and see what happens, then post back with any problems? Or is there an easier way? LOL

~BLiZZ

Edit.... that is what I just did. The copy and paste thing. It works better, but the window was that small square that fit your lightbulb pic. I changed this line:

<a href="javascript:gotoshow()"><img src="bs00847a.gif" id="slide" border="0" style="width:97;height:100;" alt="A clock" title="A clock" />

to say width:100%;height:50%

It is a little better now, but it doesn't resize to fit the pics, so my larger ones are still being smooshed and the smaller ones still being stretched.

[BLiZZaRD]

If not, I'll rewrite a bit of it for you.

This would be AWESOME! I tried my self and just keep screwing up, LOL.

Thanks Twey!

~BLiZZ

[Twey]

I pretty much rewrote the whole thing, except the bits in the header.
Replace:

  newImage.style.width = oldImage.style.width;
  newImage.style.height = oldImage.style.height;

With:

  newImage.style.width = imgwidths[whichimage];
  newImage.style.height = imgheights[whichimage];

Add two more arrays, called imgwidths and imgheights, with the widths and heights of the images, respectively. Remember to include the unit!

[BLiZZaRD]

Thanks Twey! Working on that now!

by include units I am measuring in pixels... so do I need to write:

new Array("256px",....

or what isthe unit ID for pixels?

~BLiZZ

[Twey]

That's right.

[BLiZZaRD]

Awesome! Thanks again Twey! I am half way done now.. will let you know how it looks when I am done!

~BLiZZ


<EDIT> It looks and works perfect! Thank you so very very much Twey!</EDIT>