Freepages-Help-L Archives

Archiver > Freepages-Help > 2008-10 > 1224548084


From: Barry Carlson <>
Subject: [FreeHelp] Variable Image Size 'SlideShow'
Date: Tue, 21 Oct 2008 13:14:44 +1300
References: <AHEGINKIDEILPBIDBPBDGEIMDLAA.jsmckemie@comcast.net>


Jennifer McKemie has on her test site at:-

http://freepages.genealogy.rootsweb.ancestry.com/~mckemie/test.html

a JavaScript 'SlideShow' which has variable display and cross-fade times.
The most important thing missing, is the ability to set a maximum height and
width for an image, and maintain the correct aspect ratio of the displayed
image.

Well, I have made some significant modifications to the script which will
now allow you to display your images (irrespective of their sizes) in the
correct aspect ratio with reference to a max Width or max Height - depending
on whichever is the greatest.

A sample page is at:-

http://freepages.misc.rootsweb.ancestry.com/~bristowe/test/slideshow.html

Items that can be adjusted are clearly commented in the top of the script.
Ensure the html is as shown, which includes adding an id to the table cell
(<td id="SlideShow">) plus the styling as shown. You can change the table
cell's width and height to suit. Note, the width and height attributes in
the image element are set in the styles and represent the display dimensions
of the first image loaded. The Javascript modifies the width/height
attributes for succeeding images.

Finally, the images you use should have dimensions of at least either the
width or height set in widthHeight at the top of the script. If they are
smaller, they will still display with the correct aspect ratio but could
become pixelated. Large images will scale down, but its better if they are
not too large!

Barry

This thread: