Fadeslideshow on top of lightbox

[pelissier]

1) Script Title: ultimate fadeslideshow

2) Script URL (on DD):

http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem:

When using a Jquery Lightbox gallery slideshow (in Wordpress), the lightbox makes the underlying page opaque to improve visibility of the pictures in the slideshow.

However, the fadeslideshow which is on the same page does not become opaque, but remains on top of this Lightbox and disturbs the viewing of the pictures of the lightbox gallery.

This may be a stack problem. How can we make sure that the fadeslideshow remains BELOW the overlaying lightbox display? Can the z-factor (stack) be introduced in the code somewhere?

Thanks for your time,
H.Pelissier

[jscheuer1]

It's z-index not z-factor, although the latter is an accurate descriptive term.

Anyways, it's generally easiest to increase the z-index for the lightbox script as this can be done in its css file in a few or less easy to find places whereas the fadeslideshow script requires many z-index changes throughout its phases in order to work properly, so to edit the script would be tedious, fraught with possible error.

Since I don't have your css file for the lightbox, I can only give general advice. Find each occurance of z-index in it and multiply each assigned value by 1000. Like if it has a:

z-index: 100;

make that one 10000.

If you're still having problems, post a link to the page or post the css file for the lightbox.

[pelissier]

Hello John,

Thanks! It worked perfectly. For all z-index instances the value 1000 was enough to do the trick. As for the fadeslideshow, there is no .css file, only .js. So I wondered if you can also code-regulate the z-index in a javascript code.

It's volunteer experts like you that make forums like these such a goldmine of useful info: accurate and to the point. Thanks again for your solution, with a bit of context included!

H. Pelissier

[jscheuer1]

Right. No css file for the fade slideshow. It alternates z-indexes in a narrow band around 1000 so that the image fading in will always appear on top of the previous image. Add in a little wiggle room for the captions and associated caption buttons (whether or not they're used), and it gets - as I said, complicated. If you know your css and javascript stuff you could lower the script's z-index range to 100 or 10 or even single digits. It's just easier (in most cases) to boost the lightbox's z-index.

[pelissier]

Thanks. I have just encountered the same problem with a Flash movie on one of my pages. Apparently Flash ignores all z-indexes and sets itself on top of everything, including on top of the Jquery Lightbox. For those on this forum who might encounter the same problem, I have found the solution: add
<param name="wmode" value="transparent" /> and <embed (etc)... wmode="transparent" ...>
to the code.

see:

http://www.darian-brown.com/stop-fla...tacking-order/

Thanks again,
H.Pelissier