Ultimate Fade-in slideshow (v2.0) - Images overlapping

[Gazillion]

1) Script Title: Ultimate Fade-in slideshow (v2.0)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem: Basically we have images of various sizes being displayed within the div. The script cycles through them but the previous slides never become transparent, so basically the new slides fade-in on top of the previous ones. It's not a problem when the new picture is bigger than the other but when it's the other way around it can be quite jarring

I had this issue previously but went around it by just using a uniform size for all pictures (thinking my poor implementation of the script was the problem) but a coworker tried to use the same script and had the same issue so I was hoping that maybe I overlooked a parameter.

In case this can be of any use I pasted the initialization of the fadeSlideShow object:

var regShow = new fadeSlideShow({
      wrapperid: "slideshow_wrap", //ID of blank DIV on page to house Slideshow
      dimensions: [248, 347], //width/height of gallery in pixels. Should reflect dimensions of largest image
      imagearray: [
        ["<?=$imagePath?>/interior_design.png"],
        ["<?=$imagePath?>/innovation.png"],
        ["<?=$imagePath?>/technology.png"],
        ["<?=$imagePath?>/security.png"],
        ["<?=$imagePath?>/environment.png"]
      ],
      displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
      persist: false, //remember last viewed slide and recall within same session?
      fadeduration: 500, //transition duration (milliseconds)
      descreveal: "ondemand",
      togglerid: ""
    })

edit: First post, I figure I should say 'hello' and thanks for the scripts

[jscheuer1]

I just tried this out and it is not happening. When a smaller image comes over/after a larger image, the smaller image is centered and surrounded in black, completely obscuring the larger image. There is a very brief period during the transition where the larger image is still fading away, but I would hardly call this disconcerting. In fact it seems quite natural to me. I really don't believe I am seeing what you are describing. The only thing I can think of off hand that could cause what I think you are describing would be if somehow the background color of the gallerylayer divisions (normally generated by and completely controlled as per style by the script) were to be made transparent. Editing the main script or using a css style that overrides this could cause this to happen. Also, custom browser settings might be able to override this.

One other possibility is if the dimensions of the slide show are not set to the height of the highest image and to the width of the widest image, there could be some bleed through.

If you want more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.

[Gazillion]

Hey John, thanks a lot for the speedy reply.

I would include a link to our site but it isn't live yet though you have hit the nail on the head. I did take away the black background of the div because I am using a background image instead. Do you have a tip on how to do this then ?

[jscheuer1]

The way the slide show operates is to superimpose two division upon each other and alternate which is on top via z-index, at the same time it fades in the one newly placed on top, which was previously faded out when unseen. Having background for these divisions is essential when the images are of various dimensions, otherwise what you describe will happen. If the background image you have that you want to show through is simple enough, you can just add it to the style for these divisions using overriding style in the head of the page:

<style type="text/css">
.gallerylayer {
background: black url(pathname/image.gif)!important;
}
</style>

But in most cases like these, folks have complex background images, so you either have to settle for them being out of line, or take pains to line them up with the actual page background (via the background style property's positioning values - this may still be done in the style section), or just live with the black (or a solid color of your choosing) background for the slide show.

I wish to emphasize - although you may edit the script to make these changes, one need not. Overriding styles in the head of the page (or for that matter in an external stylesheet) may be used more easily, and are easier to tailor if need be - thus leaving the script intact for use elsewhere should the need arise.