Ultimate Fade-in slide show as background image of table cell?

**jomoweb** · 10-25-2006, 06:43 PM

1) Script Title: Ultimate Fade-in slide show

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem:

This script is epic, and I would love to run it as a background slideshow in a table cell. Ideally, I would like to have some navigation buttons in a foreground table with the slides rotating in the back.

I have no idea how to call a javascript snippet as a background image though. Are there any ideas on how to turn this

<script type="text/javascript">
new fadeshow(fadeimages, 398, 379, 0, 3000, 0)
</script>

into this?

<td background="Ultimate Fade-in slide show here">

**inta** · 11-22-2006, 02:46 AM

1) Script Title: Ultimate Fade-in slide show

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem:
I have been trying to figure out how to use the UFISS to change the background image of either a table or document.

I have tried using a stylesheet with an ID set for the cell and whilst I can trigger a change with a button, I am unable to get the UFISS script to do the job.

Is there any way that I can modify the output of the script using document.write or any other method to specifically operate on the background element?

**jscheuer1** · 11-22-2006, 07:57 AM

Well, to do a table's bg, you could hack up the script like so:

http://home.comcast.net/~jscheuer1/s..._safari_bg.htm

I did this to my own version of the script (one with more cross browser fade support). You can see the code by viewing the source of the above link. The changes needed to achieve the effect are in this function:

Code:

fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}

Which I hacked (in this particular case) to:

Code:

fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
slideHTML+='<table style="height:100%;background-image:url('+this.postimages[picindex].src+');">'
slideHTML+='<tr><td style="vertical-align:middle;color:hotpink;font-weight:bold;font-size:110%;">Here is a long bit of text that I want to have see what happens to it when this script runs</td></tr>'
slideHTML+='</table>'
picobj.innerHTML=slideHTML
}

**inta** · 11-22-2006, 11:31 PM

Thanks John,

This script modification works well for anyone wanting to place a static table on the page that fades with the background image. This creates a single element on the page.

What I was looking for was more along the lines of a table created in the body as a seperate element and name the td which will contain the background image that is changed using UFISS along these lines

fadeshow.prototype.populateslide=function(picobj, picindex){
var imageSource='new fadeshow(fadeimages, 140, 225, 0, 3000, 1, "R")'
...

<td id=sourceImage style="height:100%;background-image:url('+imageSource+');">

It is along these lines that I have been trying to get the script to work and as yet have had no success.

The table will contain other graphic and dynamic interactive objects with the background slideshow running behind.

**jscheuer1** · 12-02-2006, 12:32 PM

inta,

I'm not saying that this cannot be done but, there is that possibility. You would perhaps be better off running a normal UFISS in an element with a lower z-index than a table with a transparent background and positioning both the UFISS and the table in the same spot on the page. This could get tricky as, UFISS itself uses z-index stacking as well as absolute positioning to allow the images to fade one into the other.

What you might need to do, if trying this, is to forget about setting the UFISS container's z-index, and simply set the table's z-index incredibly high, like 300000.

The reason that UFISS probably cannot be used in the manner you are outlining:

Code:

fadeshow.prototype.populateslide=function(picobj, picindex){
var imageSource='new fadeshow(fadeimages, 140, 225, 0, 3000, 1, "R")'

is that it writes out two container divisions, each of which is then rotated as regards its z-index and opacity styles, while at the same time being dynamically populated by image tags (or in the case of a linked slideshow, image tags and anchor tags). A division cannot be a background image. It can be made to look as though it is one, that is what I am suggesting. But, as I say, even this approach has its potential pitfalls.

There are scripts that can simply rotate the background image of a table or other element. However, fading in each new background isn't an option in such scripts.

**inta** · 12-03-2006, 10:35 PM

Hello John,

Your suggestion of using z-index layers and absolute positioning is what I employed as the work around solution. This, in the end was the only way it could be done as a var cannot contain a rendered image, only a source location.

Using z-index and absolute positioning, I was able to place the UFISS at the bottom of the stack and build the interactive elements above it. The result was what I was wanting to achieve so I am pleased.

Thankyou for all your assistance. I will post url of the site for everyone to see once it is complete.

**logicSix** · 03-15-2007, 11:59 PM

I've been trying to put this together. I'm having a hard time following all of this. I need a background image to fade in and out behind a formatted table. Should i just use the UFISS with the z index of the formatted table set to 30000?

Please help, i am not JS guru

**jscheuer1** · 03-16-2007, 03:00 AM

Originally Posted by logicSix

I've been trying to put this together. I'm having a hard time following all of this. I need a background image to fade in and out behind a formatted table. Should i just use the UFISS with the z index of the formatted table set to 30000?

Please help, i am not JS guru

This really has nothing to do with javascript, it is a problem in layout and style. Here is what I would suggest - start with a relatively positioned container large enough to hold either the table or the slide show, whichever is largest, and have both the show and the table inside it in this order:

HTML Code:

<div style="width:280px;height:200px;position:relative;">
<div style="position:absolute;top:0;left:0;">
<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 140, 225, 0, 3000, 0) 
</script>
</div>
<table style="position:absolute;top:0;left:0;z-index:300000;"><tr><td>whatever</td></tr></table>
</div>

The relatively positioned division will contain the absolute division and table which will position themselves relative to it. To get things to line up as desired, the top and left values for either the table, the show, or both may need to be changed. If anything other than zero is used for them, specify pixels, ex:

Code: