Transparent Overlay

**TBayBoy** · 05-31-2010, 06:37 PM

Originally Posted by millirules

1) Script Title: Ultimate Fade In Slideshow

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

3) Describe problem:

My pages are not active so no online link to show you, my question is what changes can I make so the show does not have a black background, that way my .PNG images will be tr5ansparent and I can see my website background behind them.

A picture is attached.

I'm presuming that the solution is in the .js file but not sure what to make the changes to. (I'm thinking the opacity=.7) but have no experience with JS.

**jscheuer1** · 06-01-2010, 01:04 AM

I moved your post to a new thread because it really appears to be a new question, not much if anything to do with the thread you posted in other than possibly one of the scripts involved.

The quote you have points to a slide show script. But the advice you seek appears to be as regards a lightbox type script. Which exact lightbox script are we talking about here?

What I think you want to do can probably be accomplished in the .css file for the script. Many of these lightbox type scripts share much in common. In the .css file for the script (often called lightbox.css) there is often an entry for:

Code:

#overlay

with several property/value pairs associated with it. For Lightbox v2.03a the entry for #overlay is like so:

Code:

#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	}

See the highlighted line? Make that transparent:

Code:

#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: transparent;
	}

If you want more help, please specify the exact name and version of the lightbox type script you are using.

If I've misunderstood your question, please accept my apologies, and please be more specific.

**TBayBoy** · 06-01-2010, 01:31 AM

Thanks for the reply, the script i downloaded and am playing with is Ultimate Fade-in slideshow (v2.4) located at http://www.dynamicdrive.com/dynamici...nslideshow.htm.

The slideshow works fine with the exception that it has a black background behind the images, so when my image is a transparent .png, the transparent parts show through to the script background to the black background.

What I am trying to figure out is how to make the script background transparent so i can see the <body> background behind it.

There is no included css and this is my first foray into DD scripts.

I think the adjustments need to be done in the fadeslideshow.js file as i see references to background color there, but am insure as to what this can be changed to to get me my transparent setting.

in the .js i see

setting.$wrapperdiv=$('#'+setting.wrapperid).css({position:'relative', visibility:'visible', background:'black', overflow:'hidden', width:setting.dimensions[0], height:setting.dimensions[1]}).empty() //main slideshow DIV

So a question i have is do i change this to make it transparent, or create something like

#fadeshow1{
background-color: transparent;}

to my css? to handle the <div id="fadeshow1"></div>

I hope I am clearer, and not to confusing.

PS sorry about putting this in the other thread, I thought it was a catch all for the fade-slideshow script.

**jscheuer1** · 06-01-2010, 10:34 AM

You can use css, but you are right, it is set in the script, so one must use the overriding !important keyword, ex:

Code:

#fadeshow1, #fadeshow1 .gallerylayer {
background-color: transparent!important;
}

But, and this has come up several times before, the slide show relies upon the background of the gallerylayers in order to prevent bleed through when differing sized images are used in the same show. This probably means that .png or .gif with transparent sections would also bleed through if there is no background to the gallerylayers. I say probably because, if the transparent sections all line up exactly, that might be OK.

Usually what has to be done is to give the gallerylayers the same background as the body or whatever is behind the slide show that you want to appear to show through.

One other issue that might be relevant here is that if your .png uses alpha channel transparency/opacity, it will get all messed up in IE.

Often the transparency/opacity is used as a border to the image and all borders are the same for all images. In a case like that, remove the borders from the images and place a static border image underneath the slide show.

**TBayBoy** · 06-01-2010, 02:14 PM

OK, that worked, but now I can see the new graphic over top of the old graphic then the old one dissipates when the third one loads....

I need to think on this a bit, maybe I'm trying to use a hammer to kill a flea...

I am trying to have a random series of quotes appear at the top of the page.

**jscheuer1** · 06-01-2010, 10:26 PM

Whatever you want behind the slide show must be behind the gallerylayers. What I think you are suggesting may not be possible, or, if so, only after some fairly intense coding gymnastics.

It would probably help if I explained the situation in more detail. In order to prevent the type of bleed through you are currently observing, the gallerylayers must have background. Here's a simplified version of what you are seeing (what the slide show constructs):

HTML Code:

<div id="fadeshow1">
<div class="gallerylayer">
<img src="slide1.png">
</div>
<div class="gallerylayer">
<img src="slide2.png">
</div>
</div>

In most cases like this, the gallerylayers and the parent with the wrapperid of, in this case, fadeshow1 need to be given the same background as whatever is behind them, thus making look like they are transparent. It's tricky, but using the background-position style property, it can usually be achieved.

But, you appear to have dynamic foreground content. It would be hard but doable in most cases if you just wanted the body background to show through, you seem to want the foreground of something to show through.

A different slide show script might work. I have one, but it isn't well documented yet, and I'm not certain if even it would do the trick. But it fades one image in while fading the other out, there are no layers, no stacking (z-index) and background is not required. The one you are using (when there is background) completely covers (via fading and z-index) one div containing an image with another div containing another image. Understand the difference?

**romeoyankee** · 06-16-2010, 02:41 PM

Hey jscheuer1

If I think I understand correctly.. (im having the same issue) is that in order to have a transparent background, you must give each gallery layer a transparent backgound as well?

What I am trying to do is this. I have the main page to my website which is a wedding dress site. Its pretty plain and I have the main menu (header) over top of a picture one of our photographers took. The picture is a .png with transparent, feathered edges making it look like it fades into the page.

What I want to do is have that same setup but cycle through about 5 different pictures. That way using the peakaboo I can add the Copyright info and a link to each image using the DD script mentioned above.

the initial problem is that with the black background I dont get the nice transparent edges fading into my normal background. The edges fade into the black background which then sits directly on top of my normal background with a huge contrast.

I followed your advice earlier and using css set the background transparency. that took away the black background but now I have the different size pngs fading onto each other like you had mentioned.

Can you explain how the gallery background you mentioned earlier works?

Code:

<div id="fadeshow1">
<div class="gallerylayer">
<img src="slide1.png">
</div>
<div class="gallerylayer">
<img src="slide2.png">
</div>
</div>

If i were to add a transparent.png to each gallery background would that stop the bleed through?

Each picture is the same size and I tried to do the transparent edges exactly the same for each image but there is still a tiny bit of bleed through.

**romeoyankee** · 06-16-2010, 02:49 PM

ok so i think i got that right.. (you had already put that in your css)

but it doesnt clear the last image before showing the next one. so it is only fade in vs fade in/fade out.

anybody know of a script that does fade in/out?

**jscheuer1** · 06-16-2010, 04:37 PM

No documentation yet. This one does that though:

http://home.comcast.net/~jscheuer1/side/vfs/jsjq_4.htm

This one also appears to do that (has documentation, descriptions are a bit trickier to implement in this, but I think they can be done):

http://jquery.malsup.com/cycle/

But, if your .png images use alpha channel opacity, you are going to have real problems in IE with any fading slide show. If that's the case, use Flash.

Thread: Transparent Overlay

Thread Tools

Search Thread

Transparent Overlay

Bookmarks

Bookmarks

Posting Permissions