Background color for Ultimate Fade-in slideshow

[Arnor]

Hi,

I discovered the Ultimate Fade-in slideshow script today and have been playing with it. One minor "problem" is that the background of the image is black when it first loads. Since my page is white it's not as nice as if the background of the image was white. I've tried to set the background color of the DIV to white but that didn't help so my guess is that this is somewhere in the js code.

Any ideas on how/where to fix this?

Best regards,

Arnor Baldvinsson

[jscheuer1]

You may use overriding style to do this, ex:

<style type="text/css">
#fadeshow1, #fadeshow1 .gallerylayer {
 background-color: white!important;
}
</style>

Where fadeshow1 is the wrapperid/id for the container/target division for the slide show.

[Arnor]

Thanks John We'll try that

Best regards,

[brookeln]

I am having the same exact problem as the OP, and the fix that John suggested is not working for me. What am I doing wrong?

The site is here: http://upticon.com/

The slideshow is just below the banner and navigation and consists of a series of quotes.

The code looks like this:

HTML:

<div id="quotes">
<div id="quotes-padding"></div><!--this is just some empty space-->
<div id="fadeshow1"></div><!--this is the js slideshow script-->
</div><!--end quotes-->

CSS:

#quotes {
margin:0;
padding:0;
background:#ffffff url(images/quote-box-bg.jpg) 0 0 no-repeat;
width:900px;
height:200px;
border:0;
}

#quotes-padding {
margin:0;
padding:0;
height: 38px;
}

#fadeshow1 {
border: 0;
margin: 0 auto;
padding:0;
background-color: #ffffff !important;
}

Any suggestions? Thanks in advance!!

[brookeln]

I also saw this same exact question asked and answered here: http://www.dynamicdrive.com/forums/s...ad.php?t=49799

...with the same answer, and it also worked for them, but not working for me. I'm probably doing something obviously wrong, so hopefully you guys can correct my mistake. THANK YOU!

[jscheuer1]

You are not using the fix. Yes, you have:

#fadeshow1 {
border: 0;
margin: 0 auto;
padding:0;
background-color: #ffffff !important;
}

But that is not what I suggested. You can keep that if you like though, as it does do part of the job, and simply add (highlighted) after it:

#fadeshow1 {
border: 0;
margin: 0 auto;
padding:0;
background-color: #ffffff !important;
}
#fadeshow1 .gallerylayer {
 background-color: white!important;
}

[brookeln]

But that is not what I suggested. You can keep that if you like though, as it does do part of the job, and simply add (highlighted) after it:

#fadeshow1 {
border: 0;
margin: 0 auto;
padding:0;
background-color: #ffffff !important;
}
#fadeshow1 .gallerylayer {
 background-color: white!important;
}

Thank you for pointing out my mistake - it now works. Much appreciated!

[rbridgeman]

Apologies for the months-old bump to this thread, however, how would I make the background transparent?

I have a few different sized images and don't want any specific background except for the background that's on the site I'm making it for.

Thanks.


Edit: I'm using version 2.4

[jscheuer1]

Apologies for the months-old bump to this thread, however, how would I make the background transparent?

I have a few different sized images and don't want any specific background except for the background that's on the site I'm making it for.

Thanks.


Edit: I'm using version 2.4

You can't do that as easily. You would think at first glance that making the background transparent would simply show whatever is behind the slide show.

However, the slide show proper (not counting the descriptions and and controls, if any) is made up of three divisions of equal size, two of which are absolutely positioned on top of each other, each of which contain the entire array of the images. Both of these are contained in the third division. Most of this is all constructed by the script, so you don't see it in the HTML markup for the page.

The fading effect is achieved by bringing one of the two contained divisions to prominence (higher z-index) and fading it in. After it fades in, the covered one is faded out and has its z-index lowered. It's a little more complicated than that. But that's the basic concept.

If the background is transparent, and the images are of differing sizes (as in your case) and/or have transparent regions that don't match up, there will be bleed through of the faded out image.

You can attempt to set the background to that of the site. If it's a solid color, you can do that as already discussed in this thread, and there's no problem.

I suspect though that your site's background is more complex, involving at least a background image.

If that's the case, you can set the same background image in the css for these three divisions that I've been mentioning. But unless your overall layout for the page and for the slide show stay in sync at various window sizes, it will be impossible to line up exactly for all possible window sizes.

Also, if the background for the site is even more complex than just a background-image, it can get even more complex or even impossible.

On the bright side, if it's just a background image, and one that will mesh well with itself regardless of its orientation, things are fairly simple.

So, what do you have as the site background?

In any case, for a background image you can do (in your stylesheet):

#fadeshow1, #fadeshow1 .gallerylayer {
 background: white url(background.jpg) 50px 25px !important;
}

where fadeshow1 is the wrapperid for the show, background.jpg is the image (include its path there too if different than the page's), 50px is the left offset for the background and 25px is the top offset. Use these last two items to get it to line up with the existing site background if possible.

As I say there are situations where this will be nearly if not entirely impossible.

There are other slide shows that fade that will not have this degree of difficulty in using a transparent background.

If you want more help:

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

[rbridgeman]

Thanks, John for the lengthy reply.

The site I'd be adding it to is (in place of the featured painting):
http://www.beckmanart.com

Edit: I might just add a background image as suggested and similar to the existing background by not identical. That could still likely achieve a good effect and not be entirely dominated by a single color.