PDA

View Full Version : simplegallery.js zindex problem



justin.greene
12-19-2011, 03:01 PM
Hello. I am trying to use the simplegallery.js slideshow, but am running into the problem of the slide up menu controls not working because I need to put the <div id="simplegallery1"></div> a layer below another image. Is there any way to fix this issue? My code is below. If I change the dive to a z-index larger than 3, the menu works, but the slideshow is on top of my other image "images/window.png", and I need it behind that image. Any help would be greatly appreciated.


[HTML]<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>

<style type="text/css">

/*Make sure your page contains a valid doctype at the top*/
#simplegallery1{ //CSS for Simple Gallery Example 1
position: relative; /*keep this intact*/
visibility: hidden; /*keep this intact*/
border: 10px solid darkred;
}

#simplegallery1 .gallerydesctext{ //CSS for description DIV of Example 1 (if defined)
text-align: left;
padding: 2px 5px;
}

</style>

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

/***********************************************
* Simple Controls Gallery- (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 simpleGallery({
wrapperid: "simplegallery1", //ID of main gallery container,
dimensions: [874, 429], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: [
["images/large image.jpg", "http://en.wikipedia.org/wiki/Swimming_pool", "_new"],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "", ""],
["http://i30.tinypic.com/531q3n.jpg", "", "", "Eat your fruits, it's good for you!"],
["http://i31.tinypic.com/119w28m.jpg", "", "", ""]
],
autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
oninit: function () { //event that fires when gallery has initialized/ ready to run
//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
},
onslide: function (curslide, i) { //event that fires after each slide is shown
//Keyword "this": references current gallery instance
//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
}
})

</script>
</head>
<body>
<form id="form1" runat="server">
<img src="images/window.png" style="z-index:3; position:absolute;" />
<div id="simplegallery1" style="z-index:1; position:absolute; top: 92px; left: 266px;"></div>
</form>
</body>
</html>
</HTML>