Untimate Fading Slideshow - transparent gifs

[Coomkeen]

Ultimate Fadein Slideshow (v1.51)

http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

I have to fade in and out gifs with transparent backgrounds.
The script works fine provided I set the var fadebgcolor="", except it leaves the previous gif 100% visible behind the new one.
What I need to do is fade out the previous gif at the same time as fading in the new one.

Any ideas how to do this please?

Ron

[ddadmin]

The fadebgcolor should be set to an explicit color to prevent the previous image from showing through. This is because the script basically rotates two overlapping layers. Is there a reason why you can't just do that?

[Coomkeen]

Hi,
Yes because the gifs have transparent backgrounds and the main page background texture has to show through.

Ron

[jscheuer1]

Then you need to style the background image into the slide show's 'layers' (they are actually divisions) in such a way as to coincide with the background image of the page. Depending upon how complex an image it is, this will work (in your stylesheet, for one slide show):


#master0 div {
background-image:url(whatever.gif);
}

If the image is too complex and the default positioning of it is off when using the above simple background-image value, left and top coordinates may be used, generally these can be guessed at and then fine tuned via trial and error:


#master0 div {
background-image:url(whatever.gif) 200px 150px;
}

Negative values may be used. 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.

[Coomkeen]

Thanks John,

Yes it's a bit of a complex one really.
The background is fixed and the rest of the site scrolls.
At the moment the background is just a repeated pattern, but I'm planning on making a larger repeating photograph or graphic for it.

It's at www.smallholders.org

Can't see an easy way around this yet.

Ron

[jscheuer1]

First, get rid of this (red), you aren't using it and it is preventing the slide show from working in most browsers:


<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 140, 117, 0, 6000, 1, "")
new fadeshow(fadeimages2, 140, 117, 0, 6000, 0)

</script>

Just add to your style section:


<style type="text/css">
body {
background-image: url("images/lgren051.jpg");
background-position: 0% 0%;
background-repeat: repeat;
background-attachment: fixed
}
#master0 div {
background-image: url("images/lgren051.jpg");
}
</style>

[Coomkeen]

That's brilliant John.
Many thanks.
One day I'll get the hang of this Javascript.
Too busy with php, mysql, and all that stuff at the mo.

Thanks again.

Ron

[jscheuer1]

I noticed a few other things with your modified version of the script. For what you are doing, you would probably be happier with:


new fadeshow(fadeimages, 140, 117, 0, 6000, 1)

instead of:


new fadeshow(fadeimages, 140, 117, 0, 6000, 1, "")

That is, unless you really want the random display.

Now I see that you have played with initial opacity and fade rate, but the way you did it seems to be making things a little choppier than they need to be.

Where you have:


this.degree=0.1 //initial opacity degree (1%)

it should be:


this.degree=0 //initial opacity degree (1%)

for:


obj.degree+=1

2 should do:


obj.degree+=2

And I think you missed this one:


fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrow . . .

which should also be 0 for what you are going for:


fadeshow.prototype.resetit=function(){
this.degree=0
var crossobj=iebrow . . .

[Coomkeen]

Thanks again John.

Yes I admit to playing with it trying to see what did what.
And many times forgot to change it back afterwards.

Much better now.

Ron