Ultimate Fade-in slideshow - transparent fade-in?

[hnwaxman]

I had the same question and was glad to see the answer, which does work. My problem is that the images are of different widths and the new and prior image don't fade at the same time so the next image sits on top of the prior one. I don't see where to synchronize the fades.

Must all the images be of the same size?

Thanks

[jscheuer1]

For that solution, yes. There is a solution that works in most cases where you have varying sizes of images and/or images with semi or fully transparent sections:

<style type="text/css">
#fadeshow1, #fadeshow1 .gallerylayer {
	background: transparent url(myimage.jpg) -100px -233px !important;
}
</style>

Where fadeshow1 is the wrapperid again and myimage.jpg is the background image behind the slideshow. The -100px is the horizontal offset and the -233px is the vertical offset. These two are used together, often adjusted via trial and error to get the background image used in the slideshow to lineup with its identical counterpart behind the slideshow.

Some layouts are too fluid for that approach though. Then a javascript function is required to line them up and keep them lined up in various window sizes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.