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
LVL 1
ndonhauserAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

BadotzCommented:
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

0
BadotzCommented:
Slightly modified:


<!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,
			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 (inc = 0; inc < bgslides.length; inc += 1) {
			processed[inc] = new Image();
			processed[inc].src = bgslides[inc];
		}
		inc = 0;
		
		function slideback() {
			// This next statement can be removed for production
			window.status = 'inc = ' + inc + ', slide = "url(\'' + bgslides[inc] + '\')"';
			
			dom.style.backgroundImage = 'url(' + bgslides[inc] + ')';
			
			inc = ++inc % processed.length;
		}
		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

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
BadotzCommented:
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;
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

ndonhauserAuthor Commented:
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!
0
BadotzCommented:
If you go back to Dynamic Drive, there is this:

http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow_dev.htm
0
ndonhauserAuthor Commented:
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.
0
BadotzCommented:
Meaning what, exactly?
0
ndonhauserAuthor Commented:
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
0
BadotzCommented:
Can't you just adapt the fading to the page I already provided?
0
ndonhauserAuthor Commented:
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/
0
ndonhauserAuthor Commented:
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!
0
BadotzCommented:
Grade "C"? Was I bad?
0
ndonhauserAuthor Commented:
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.
0
BadotzCommented:
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.
0
ndonhauserAuthor Commented:
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.
0
BadotzCommented:
Regarding your post http:#24453069:
Why can't you adapt the fading on that page to your needs?
0
ndonhauserAuthor Commented:
I tried but I could not get it working with my current setup of the table background changing images.
0
BadotzCommented:
Good luck.

Color me gone.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JScript

From novice to tech pro — start learning today.