jonnyfreak
06-04-2013, 08:28 PM
i am using the Ultimate Fade In Slideshow
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
i have a logo that i want to have in front of the slideshow images but am having trouble. I have tried numerous things but cant have the image on top of slideshow.
the way i have it set up is as follows
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/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: [1000, 300], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["../images/slideshow/1.jpg", "", "", ""],
["../images/slideshow/2.jpg", "", "", ""],
["../images/slideshow/3.jpg"],
["../images/slideshow/4.jpg"],
["../images/slideshow/5.jpg"],
["../images/slideshow/6.jpg"],
["../images/slideshow/7.jpg", "", "", ""] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})
</script>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-repeat: repeat;
}
#fadeshow1 {
background-image: url(../images/LOGO21.gif);
}
#apDiv1 {
position:absolute;
left:0px;
top:0px;
width:825px;
height:167px;
z-index:1;
}
#apDiv1 {
}
</style>
</head>
<body>
<div id="fadeshow1"></div>
<div id="fadeshow2toggler" style="width:1000px; text-align:center; margin-top:10px">
<span class="status" style="margin:0 50px; font-weight:bold"></span>
</div>
</body>
</html>
as i say i have a logo that i trued to place in <div id="fadeshow1"></div> but obviously that will be covered by the slideshow images. I want to be able to place the logo in front of the slideshow images
thanks in advance
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
i have a logo that i want to have in front of the slideshow images but am having trouble. I have tried numerous things but cant have the image on top of slideshow.
the way i have it set up is as follows
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/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: [1000, 300], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["../images/slideshow/1.jpg", "", "", ""],
["../images/slideshow/2.jpg", "", "", ""],
["../images/slideshow/3.jpg"],
["../images/slideshow/4.jpg"],
["../images/slideshow/5.jpg"],
["../images/slideshow/6.jpg"],
["../images/slideshow/7.jpg", "", "", ""] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})
</script>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-repeat: repeat;
}
#fadeshow1 {
background-image: url(../images/LOGO21.gif);
}
#apDiv1 {
position:absolute;
left:0px;
top:0px;
width:825px;
height:167px;
z-index:1;
}
#apDiv1 {
}
</style>
</head>
<body>
<div id="fadeshow1"></div>
<div id="fadeshow2toggler" style="width:1000px; text-align:center; margin-top:10px">
<span class="status" style="margin:0 50px; font-weight:bold"></span>
</div>
</body>
</html>
as i say i have a logo that i trued to place in <div id="fadeshow1"></div> but obviously that will be covered by the slideshow images. I want to be able to place the logo in front of the slideshow images
thanks in advance