Ultimate Fade-in slideshow (v2.1) and Shadowbox

[dattanman]

1) Script Title: Ultimate Fade-in slideshow (v2.1)

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

3) Describe problem:

Basically when I open ShadowBox it opens behind the Slideshow rather than on top of it. I'm not sure what the problem is, as I've seen it working on another site. I tried LightBox first, and I thought it was just LightBox so I tried using ShadowBox, but no avail.

Here's the script for ShadowBox I used:

<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>

and here's a line of one of the pictures that opens:

<a href="http://i1022.photobucket.com/albums/af344/DatTanMan/Grassroot%20Soccer/IMG_1733.jpg" rel="shadowbox[grassroots]" title="Beautiful sunset">image</a>

Finally, here is the code for the slideshow:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [960, 457], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["header.png"],
		["header_2.png"],
		["header_3.png"],
		["header_4.png"], 
		["header_5.png"], 
		["header_6.png"], 
		["header_7.png"], //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:3000, cycles:0, wraparound:false},
	persist: true, //remember last viewed slide and recall within same session?
	fadeduration: 1000, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})

</script>


<center>
<div id="fadeshow1"></div>
</center>

Thank you! :)

[jscheuer1]

Gotta fix this:

["header_7.png"], //<--no trailing comma after very last image element!

or else the page will barf in IE.

As to your question, that would be in the stylesheet for Shadowbox.

<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">

I imagine that file has a selector like so (from http://www.shadowbox-js.com/source/shadowbox.css):

#sb-container {
  height: 100%;
  display: none;
  visibility: hidden;
  z-index: 999;
}

Change the highlighted:

#sb-container {
  height: 100%;
  display: none;
  visibility: hidden;
  z-index: 9999;
}

If your shadowbox.css file differs too much from the one I was using as a guide, or you have altered in some way the z-index settings for the slide show, other and/or different change(s) might be required. 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.

[dattanman]

It worked!

Thanks John!!