asked on

Table Background Slideshow - With Slide Transitions

Hello,
I am trying to create an application that has a changing table background. However, I am having a problem finishing up the code.

The things that I am looking to finish is to have an image come up right away and when the image changes to have a nice fade transition.

For the background image I tried adding it but when the next slide is supposed to come it does not show up and the same background image is still there.

I have added the code and I have attached the images.

Thank you!

<!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>
    <title></title>
    <style type="text/css">
        #bslide
        {
            background-attachment: fixed;
            background-repeat: no-repeat; /*Use center center in place of 300 200 to center bg image*/
            background-position: top and left;
           /*background:url('images/1.jpg');*/
        }
    </style>
 
    <script type="text/javascript">
 
        //Background Image Slideshow- © Dynamic Drive ([url]www.dynamicdrive.com[/url])
        //For full source code, 100's more DHTML scripts, and TOS,
        //visit [url]http://www.dynamicdrive.com[/url]
 
        //Specify background images to slide
        var bgslides = new Array()
        bgslides[0] = "images/1.jpg"
        bgslides[1] = "images/2.jpg"
        bgslides[2] = "images/3.jpg"
 
        //Specify interval between slide (in miliseconds)
        var speed = 3000
 
        //preload images
        var processed = new Array()
        for (i = 0; i < bgslides.length; i++) {
            processed[i] = new Image()
            processed[i].src = bgslides[i]
        }
 
        var inc = -1
 
        function slideback() {
            if (inc < bgslides.length - 1)
                inc++
            else
                inc = 0
            document.getElementById ? document.getElementById('bslide').background = processed[inc].src : document.all['bslide'].background = processed[inc].src
        }
 
        if (document.all || document.getElementById) 
            window.onload = new Function('setInterval("slideback()",speed)')
 
    </script>
 
</head>
<body>
    <table id="bslide"   style="width: 800px; height: 500px;">
        <tr>
            <td valign="bottom" >
 
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; testing text ontop&nbsp;</td>
        </tr>
    </table>
</body>
</html>

Open in new window

Images.zip

Badotz

Try this:

<!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>
<title></title>
<style type="text/css">
#bslide {
	background-attachment: fixed;
	/* Use center center in place of 300 200 to center bg image*/
	background-repeat: no-repeat; 
	background-position: top left;
}
</style>
 
<script type="text/javascript">
	function painter() {
		//Background Image Slideshow- © Dynamic Drive ([url]www.dynamicdrive.com[/url])
		//For full source code, 100's more DHTML scripts, and TOS,
		//visit [url]http://www.dynamicdrive.com[/url]
		
		//Specify background images to slide
		var bgslides = [],
			processed = [],
			inc = 0,
			i = 0,
			speed = 3000,
			dom = document.getElementById ? document.getElementById('bslide') : document.all['bslide'];
		
		bgslides[0] = 'images/1.jpg';
		bgslides[1] = 'images/2.jpg';
		bgslides[2] = 'images/3.jpg';
		
		//preload images
		
		for (i = 0; i < bgslides.length; i++) {
			processed[i] = new Image();
//			processed[i].src = bgslides[i];
		}
		
		function slideback() {
			
			window.status = 'inc = ' + inc + ', slide = "url(\'' + bgslides[inc] + '\')"';
			
			dom.style.backgroundImage = 'url(' + bgslides[inc] + ')';
			
			if (++inc >= bgslides.length) {
				inc = 0;
			}
		}
		slideback(); // Show initial image
		
		window.setInterval(slideback, speed); // Trigger periodic image changes
	}
 
	window.onload = painter;
 
</script>
 
</head>
<body>
<table id="bslide" style="width: 800px; height: 500px;">
 
<tr>
<td valign="bottom" >
 
testing text ontop </td>
</tr>
</table>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

Badotz

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Badotz

The statement:

inc = ++inc % processed.length;

means "set [inc] to the value of [inc + 1] modulo [processed.length];

And for clarity should probably be:

inc = (++inc) % processed.length;

ndonhauser

ASKER

Thank you very much for the quick response.

However, I have one quick question about the transition. Is there way to get more of a fade into the next picture in the slide show?

Again thank you!

Badotz

If you go back to Dynamic Drive, there is this:

http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow_dev.htm

ndonhauser

ASKER

Thank you for the link, but I will not be able to use that because I need to be able to put information on top of the slide show.

Thank you.

Badotz

Meaning what, exactly?

ndonhauser

ASKER

I will be putting a menu and other controls inside of the menu. That is why I wanted to use a table and change the background of the table so that other objects can still be on top of it.

Thanks

Badotz

Can't you just adapt the fading to the page I already provided?

ndonhauser

ASKER

I am trying to get something like this on this page and I am not sure how to go about it in this situation with it being the background image. I am looking for the smooth fade in and out that is the sample called "Fading one image into another" located at http://brainerror.net/scripts/javascript/blendtrans/

ndonhauser

ASKER

I was wondering if you had any ideas on how to implement the above link into the current code? Any help would be greatly appreciated.

Thank you!

Badotz

Grade "C"? Was I bad?

ndonhauser

ASKER

Not bad the first part was fantastic, but half of th question was not answered. If I can change the grade and the other half of the question is answered I will be more than happy to change it.

Badotz

If you are referring to this:

"However, I have one quick question about the transition. Is there way to get more of a fade into the next picture in the slide show?"

then I would argue that is a separate question. Also, it maybe a quick question, but the answer is more involved.

ndonhauser

ASKER

I disagree that it is a second question because of this line. The things that I am looking to finish is to have an image come up right away and when the "image changes to have a nice fade transition"

I have no doubt that it is a highly involved question, that is why I brought it to this board to ask my question.

I have posted another question asking the question with fading.

Thank you.

Badotz

Regarding your post http:#24453069:
Why can't you adapt the fading on that page to your needs?

ndonhauser

ASKER

I tried but I could not get it working with my current setup of the table background changing images.

Badotz

Good luck.

Color me gone.