Results 1 to 3 of 3

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

  1. #1
    Join Date
    Jul 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default DIV over the Ultimate Fade-in slideshow (v.24) doesn't work

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

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.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!

  2. #2
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    Her is an example of a page wit a div that is placed over the slideshow.
    Code:
    <!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.

  3. #3
    Join Date
    Jul 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hey 'azoomer'

    Thank you very much, it worked!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •