Ultimate Fade-in slideshow (v2.4)

**pcb-beachbum** · 07-09-2010, 07:23 PM

Wow! great script.
I have been using one that uses css to rotate images for a table background image, but it doesn't have the fade in/out feature.

I have tried to incorperate this script for that use but can't get the images to display as a background. I have tried to use z-index for the div id but no luck.

Anyone know how to make it work so that Static text or even other images can be shown over the changing images?

Thanks

**tomywie** · 07-09-2010, 08:05 PM

Are you sure that the slideshow doesn't use z-index? Check that ;p

And would a link to your site be available?
That would porbably make the problem easier to solve..

**pcb-beachbum** · 07-09-2010, 09:28 PM

Here is the link to the website using the original script..no fade in
http://www.emeraldcoastnwfl.com

Here is a link to the new header using the Ultimate fade-in script..fade-in
but can't see text.

http://www.emaraldcoastnwfl.com/Header1.html

I am using this vs flash (as I have done many times before) so that the site can be seen on the new I-Pad

**azoomer** · 07-09-2010, 09:40 PM

Right now the last link isn't working.
many times this would do it

Code:

#fadeshow1 { 
    z-index: 0; 
}

but we need to see the page to be sure

**pcb-beachbum** · 07-09-2010, 09:52 PM

Sorry..misspelled emerald on second link.

http://emeraldcoastnwfl.com/Header1.html

**pcb-beachbum** · 07-09-2010, 10:00 PM

I tried this...after setting the table above the div and id =fadetable ...no help

#fadeshow1 {
z-index: -300;
}
#fadetable {
z-index: 3000;
}

**azoomer** · 07-09-2010, 10:31 PM

Hi ithink the problem can be solved if you take the "overlay" outside of the fadeshow div. I did quick mockup lilke this

Code:

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

<script type="text/javascript" src="Scripts/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: [630, 270], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["images/dt_pic1b.jpg"],
		["images/dt_pic2b.jpg"],
		["images/dt_pic3b.jpg"],
		["images/dt_pic5b.jpg"],
		["images/dt_pic4b.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">
#fadeshow1{
	position: relative;
	z-index: 0;
	height: auto;
	width: auto;
}
#overlay{ 
       position:relative; 
       margin-top:-260px;
       z-index:2;
}
</style>
</head>
<body>

<table width="890" height="255" align="center" >
<tr valign="bottom"><td width="234"><img src="images/cr3.jpg" /></div></td>
<td width="650" align="left"><h3>&nbsp;&nbsp;"Where Dreams Come Home"</h3>

<div id="fadeshow1"></div>
<table width="100%" height="255" border="0" cellpadding="0" align="center" id="overlay">
  <tr>    
   <td align="center" width="218"><img src="images/CR_namescript1.gif" width="210" height="44"><br>
     <strong>(850) 541-2281 Cell<br>(800) 239-4875 Free<br>
   (850) 872-8203 Fax</strong><br><br>
   <a href="mailto:linda.tew@gmail.com" class="style1">E-Mail: <span class="style2"><br>craevens@gmail.com</span></a><br>

   <br></td> <td width="196">&nbsp;</td>
   <td align="center" width="222"><img src="images/CB_3dLogo_web1.jpg"><br>
     Coldwell Banker Carroll Realty Inc.<br>2551 Jenks Ave.<br>Panama City Fl. 32405<br><br><img src="images/realmls_logo.gif">     <br>    </td>
  </tr>
</table>
</td>
</tr>
</table>

I had to give it the id="overlay" and then give it a negative margin-top to put it over the slides, but I think this could work.
The markup is totally invalid but never the less it gives the effect you ask for.

**pcb-beachbum** · 07-09-2010, 11:00 PM

U DA Man AZoomer!!!

That did the trick. Thanks a Million. This is a very usefull soultion since I-Pads don't use Flash.

Thread: Ultimate Fade-in slideshow (v2.4)

Thread Tools

Search Thread

Ultimate Fade-in slideshow (v2.4)

Bookmarks

Bookmarks

Posting Permissions