PDA

View Full Version : DIV over the Ultimate Fade-in slideshow (v.24) doesn't work



Roeland
07-18-2010, 07:36 PM
1) Script Title: Ultimate Fade-in slideshow (v.24)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: The script works great, The image fades nicely. But I want to have a DIV over the slideshow div. So it must be on top. I tried Z index and some other things but each time the div goes behind the div of the slideshow.

I hope someone can help me, thanks in advance!

azoomer
07-18-2010, 09:59 PM
Her is an example of a page wit a div that is placed over the slideshow.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>

<style type="text/css">

#fadeshowcontainer {
position:relative;
width:400px;
height:300px;
margin-left:auto;
margin-right:auto;
}

#fadeshow1, #fadeshow1 .gallerylayer {
background-color: white !important;
}
#fadeshow1 {
position:absolute;
width:400px;
height:300px;
left:0;
top:0;
z-index:1;
}
#overlay {
position:absolute;
width:400px;
height:300px;
left:0;
top:0;
z-index:100;
background: url("overlay.png");
}
</style>

<script type="text/javascript" src="jquery.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: [400, 300], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."]
],
displaymode: {type:'auto', pause:5000, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1000, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})
</script>
</head>
<body>
<div id="fadeshowcontainer">
<div id="fadeshow1"></div>
<div id="overlay"></div>
</div><!-- end fadeshowcontainer -->
</body>
</html>
It is the div with the id overlay that is on top. It is absolutely positioned in the same place as the fadeshow1, within a common container, that is relatively positioned. The fadeshow1 is set a z-index:1 and the overlay with a higher z-index. You can see that in the css. Right here the overlay has a background picture set in the css, but you could put content in the overlay div instead. It is worth noticing that the pause on hover and the ondemand description will not work if there's a transparent png over the show. It will only work in areas that are not "covered" so to speak.

Roeland
07-18-2010, 11:13 PM
Hey 'azoomer'

Thank you very much, it worked!