Ultimate Fade Slideshow Z-index Question

[moez]

1) Script Title: Ultimate Fade Slideshow

2) Describe problem:

Hopefully this makes sense as I am quite new to this type of development. I have set up the slideshow to appear in a particular div on the right side of my web page. This div is supposed to sit behind the div that is next to it on the left. The end result is that the text in the left div is supposed to overlay a portion of the pictures on the right.

To do this, I had set up the z-index on the right side to be a higher value than the right. When I use a "static" picture, this works for me as expected. However, when I run the slideshow, it seems to override the z-index value of my right div and overlays the text from the left.

Does anyone have any ideas about what I can do about this? Hopefully, I made some degree of sense.....

Any insights would be appreciated.

Thanks!
Moez

[jscheuer1]

As the z-index property of the images is set by the script and varies in order to get the desired overlay fading effect, if you want other content to be over the images, set its z-index high - say, 1000 at least.

Also, make its position relative or absolute.

[moez]

John,
Thank you for getting back with me. Your suggestion did the trick. I set the position of the left cell to relative, with its z-index higher than the right and I obtained the result that I wanted.

Thanks again!
Moez

[annasue]

I am not very proficient in these scripts. Please see www.cynsheas.com/galleries/pg_cakes. I have a fadeslideshow script running at the top. As you will see, I have a Visual Light Box photo galleries running just below that. I do not want the fadeslideshow to overlay the photo gallery. Thank you in advance for your help.

[annasue]

I have tried playing with the z-index settings in fadeslideshow.js, setting them to 0 and then to 3000. Nothing seems to make a difference.

[jscheuer1]

Don't mess with the slideshow script. In fact, best to put it back the way it was. What you can do is (using a text only editor like NotePad) increase the z-index in the cynsheas.com/galleries/pg_cakes/engine/css/visuallightbox.css file, starting from the top, changes red:


#overlay{
position:absolute;
top:0;
left:0;
z-index:1900;
width:100%;
height:auto;
background-color:#151410;
}

#lightbox{
position:absolute;
top:20px;
left:0;
width:100%;
z-index:2000;
text-align:center;
color:#151410;
line-height:0;
}

#lightbox a, #lightb . . .

Save and use that version of the file.

The browser cache may need to be cleared and/or the page refreshed to see changes.