Ultimate Fade-in slideshow Picture Positioning?

[JManPHX]

1) Script Title:
Ultimate Fade-in slideshow

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

3) Describe problem:
I love this script, but I have several photos that are not the same size, and rather then crop all of them myself, I'd love it if the slideshow automatically centered the image within the DIV area, as most of my images I just want the middle to be displayed anyways. Right now it's only showing from the top edge of the graphic down to the height I specified for the slide show. Is there a way to modify the script to allow for image centering?

Thanks!

-JManPHX

[jscheuer1]

I'm not the author of this script. And I'm not personally inclined at the moment to help you directly with your request.

However, it might be helpful for you to realize, in case you didn't know, that the script already does that, sort of.

If you set the width to the width of the widest image, and set the height to the height of the tallest image, it will center all the images. Set the width and height here:


var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.c . . .

With that knowledge, you should be able to set up your own 'crop box' around the slide show. Say your show's wrapperid is fadeshow1 and its dimensions accordingly, to show all of each image centered as described above would work out to 600x600. Then you could have like:


var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [600, 600], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.c . . .

and:


<div style="width: 300px; height: 300px; overflow: hidden;">
<div style="width: 600px; height: 600px; margin: -150px 0 0 -150px;">
<div id="fadeshow1"></div>
</div>
</div>