PDA

View Full Version : 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:confused:

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

#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


<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.


:)