View Full Version : how to prevent slideshow from resizing images of different sizes?

12-17-2005, 05:50 AM
I would like a javascript slideshow that allows me to use images of different sizes and DOESN'T resize them. I also need it to be control driven (not just automatic) and I need captions. I've spent a while trying to find the right thing but almost all seem to resize the images (or they don't have captions).

I used this code from codelifter.com and it works great except that it resizes the images and stretches some to fit the widest dimensions of the others, once a wide one is introduced into the sequence.


Is there any way around this? I don't really know javascript - I am slowly figuring some things out but this is beyond me. If anyone knows any code I could insert to prevent it from resizing imgages, I'd appreciate the help. I already experimented with changing the html (i.e. changing table cell sizes, deleting size indications, etc.) and that didn't seem to help.

If you know of another slideshow that could suit my purposes then that's great too, but I found that most resized the images in some way if they were different sizes.


12-17-2005, 07:06 AM
Hi Mdessen,

Welcome to the forum.

I have posted a "slideshow javascript" to the sub-forum of this forum.

Here is the link.


It may be just what you want as written. But if not you should be able to pull out the parts that you need and adapt it to suit you.

I tried to put in enough programer note to help figure out what everything is doing. But if you have questions feel free to ask.

Here is a link to a test page I wrote that uses the slideshow as I wrote it.


12-17-2005, 05:01 PM
Thanks! That looks like it will do what I need. Where you put 700px as the maximum width or height, that does mean that any images that don't exceed 700x700 will display at their normal size, right? In other words, an image of say 400x200 won't be stretched to 700x350? (That's what I'm trying to avoid.) I'll write you if I have any problems. I really appreciate the help!!! Thank you.

12-17-2005, 05:06 PM
probably got width="100" height="100" in the image tag, remove these and the slideshow images will display at natural size

12-17-2005, 10:04 PM
The width and height attributes are required if you want your HTML to be valid. A slideshow is only really meaningful if all images are the same size. You could edit the smaller images and enlarge them to match the largest size. Give them a transparent background on the extra area if you want them to appear smaller on the screen.

12-18-2005, 02:12 AM
Thank you everyone for all the suggestions.

About changing the dimensions within the image tags (I assume you meant the first script I referred to, from codelift.com) - I actually tried that and it didn't work. It ended up stretching the images horizontally to meet the width of the largest previous one in the sequence, and I couldn't get around that by changing the img tags in the html. But this code from PhotoJoe works since it only specifies the largest possible height and width of the images.

Also, I know that I could put the images on a larger canvas to make them all the same size, but is that really necessary to have vaild code? I'd rather not go to the trouble and I don't get why slide shows would have to have images all of the same dimensions. Is there a reason for that?

Thanks again.

12-18-2005, 09:06 PM
With a slideshow where all of the images are the same size, moving from one image to the next changes the image and leaves the rest of the page looking the same. With different size images moving from one image to the next results in the entire formatting of the page having to be redone (in those browsers that support such reorganisation) or result in the page being completely stuffed in browsers that don't support redoing the whole page because an image has changed (eg. Netscape 4).

12-19-2005, 01:54 PM
Hi Stephen,

If you check out the link to the test page I mention you will see that the page is quite stable. The images are shown on a 700 x 700 px "screen". The "screen" always stays the same size, only the images that are displayed on the "screen" change. For me I only had to sizes of images 700 x 467 px or 467 x 700 px. I have not yet tested the script with other size images, but I think they would not be any problems as long as they did not exceed the size limit set ( which is a variable that could be changed if needed ).