Ultimate Fade-in slideshow - help with image size

[shpemu]

1) Script Title: Ultimate Fade-in slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: Hi there. First off, thanks for publishing such a great script! I however have a problem I'd like to solve. I have rather large photos I'd like to put into this slideshow, but I'd like the box to remain the size specified in the code. Here's what I've found so far:

There's this code starting at line 138:

var imgdimensions=[$slideimage.width(), $slideimage.height()] //center align image
$slideimage.css({marginLeft: (imgdimensions[0]>0 && imgdimensions[0]<setting.dimensions[0])? setting.dimensions[0]/2-imgdimensions[0]/2 : 0})
$slideimage.css({marginTop: (imgdimensions[1]>0 && imgdimensions[1]<setting.dimensions[1])? setting.dimensions[1]/2-imgdimensions[1]/2 : 0})

I can hard-code the width and height by changing line 138 to this:

var imgdimensions=[$slideimage.width(250), $slideimage.height(180)] //center align image
...but that doesn't work if I have an image that doesn't match those ratios exactly (i.e. a portrait photo or a square photo).

I tried adding a separate line:

$slideimage.css({max-width:'250px'})
...with and without the single quotes. The script will not load if I add that line.

Where exactly can I plug in this code to force the images to resize to the size of the slideshow? If I have the wrong code, what code can I implement?

Thanks :)

[jscheuer1]

Rather than edit the script, leave it alone. Set max width/height styles in a stylesheet:


.gallerylayer img {
max-width: 250px;
max-height: 180px;
}

By way of explanation, gallerylayer is the class name of the script generated divisions that hold the slideshow images. Using max, means the images will be resized by the browser to fit a 250 x 180 box.

Note - doesn't work in IE less than 7.

[shpemu]

Works like a charm. Thanks!