Fading Rotating Background Images?

OK so I am making progress --

it appears that the reason the SECOND TO LAST is displaying, is because apparently all images are displaying in a duplicate box; only, they disappear as their number comes up. Opacity is being given 1 to all but the last image, and the last image is given opacity -0.001, which makes it hidden, hence why you see the second-to-last instead of the last.

But what SHOULD happen is ALL but the first one should be given opacity -0.001 until their number comes up. (when their number comes up, for some reason their duplicate disappears, and the javascript manually overrides the page CSS for the HTML element with the opacity.)

SOLVED!!!! YAY!!!!

Ok so you need to add the following CSS:

Code:

#bg img { opacity: -0.001; }

and just a note, you need to force the image location with !important. For example, the full CSS for the div id of bg, is:

Code:

#bg { position: absolute; z-Index:0; } #bg img { position: absolute; top: 50px !important; left: 50px !important; opacity: -0.001; }

http://jsfiddle.net/6CWud/16/

Quote:

Originally Posted by sdfagahetehr

[unrelated to issue with thread] I figured it out, it's a bug with this site - if I edit my post and add a Reply WIth Quote to a post I already posted, then for some reason it deletes the post...

Thank you. We'll look into it.

Now that I fixed the main issue,
one more thing, how can I randomize the images, but always starting with image #1?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <TITLE>New Restaurant - Crete</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Imagetoolbar" content="no"> <link rel="shortcut icon" href="favicon.ico"> <script type="text/javascript" language="JavaScript1.2"> //Background Image Slideshow- © Dynamic Drive (www.dynamicdrive.com) //For full source code, 100's more DHTML scripts, and TOS, //visit http://www.dynamicdrive.com //Specify background images to slide var bgslides=new Array() bgslides[0]="http://www.ko-go.gr/restaurant/1a.jpg" bgslides[1]="http://www.ko-go.gr/restaurant/2a.jpg" bgslides[2]="http://www.ko-go.gr/restaurant/3a.jpg" bgslides[3]="http://www.ko-go.gr/restaurant/4a.jpg" //preload images var processed=new Array() for (i=0;i<bgslides.length;i++){ processed[i]=new Image() processed[i].src=bgslides[i] } </script> <style type="text/css">  </style> </head> <body> <div id="bg" > <img src="http://www.vicsjavascripts.org.uk/StdImages/1.gif"> <img src="http://www.vicsjavascripts.org.uk/StdImages/2.gif"> <img src="http://www.vicsjavascripts.org.uk/StdImages/3.gif"> <img src="http://www.vicsjavascripts.org.uk/StdImages/4.gif"> </div> <table id="wrapper" style="z-Index:101;" > <tr> <td> <div class="image"><img src="http://www.ko-go.gr/restaurant/blackboard.png" alt=""> <div class="text"><h1>COASTMED</h1> <p>THE TOP RESTAURANT IN GOUVES <br> - SPECIALISING IN BOTH CRETAN <br> AND GREEK CUISINE.</p> </div> </div> </td> </tr> </table> <script type="text/javascript"> // Animate (11-January-2010) // by Vic Phillips http://www.vicsjavascripts.org.uk // **** Functional Code(1.58K) - NO NEED to Change function zxcAnimate(mde,obj,srt){ this.to=null; this.obj=typeof(obj)=='object'?obj:document.getElementById(obj); this.mde=mde.replace(/\W/g,''); this.data=[srt||0]; return this; } zxcAnimate.prototype.animate=function(srt,fin,ms,scale,c){ clearTimeout(this.to); this.time=ms||this.time||0; this.neg=srt<0||fin<0; this.data=[srt,srt,fin]; this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0]))); this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:''; this.inc=Math.PI/(2*this.mS); this.srttime=new Date().getTime(); this.cng(); } zxcAnimate.prototype.cng=function(){ var oop=this,ms=new Date().getTime()-this.srttime; this.data[0]=(this.c=='s')?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:(this.c=='c')?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1]; this.apply(); if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10); else { this.data[0]=this.data[2]; this.apply(); if (this.Complete) this.Complete(this); } } zxcAnimate.prototype.apply=function(){ if (isFinite(this.data[0])){ if (this.data[0]<0&&!this.neg) this.data[0]=0; if (this.mde!='opacity') this.obj.style[this.mde]=Math.floor(this.data[0])+'px'; else zxcOpacity(this.obj,this.data[0]); } } function zxcOpacity(obj,opc){ if (opc<0||opc>100) return; obj.style.filter='alpha(opacity='+opc+')'; obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001; } </script> <script type="text/javascript">  </script> </body> </html>

Quote:

Originally Posted by vwphillips

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <TITLE>New Restaurant - Crete</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Imagetoolbar" content="no"> <link rel="shortcut icon" href="favicon.ico"> <script type="text/javascript" language="JavaScript1.2"> //Background Image Slideshow- © Dynamic Drive (www.dynamicdrive.com) //For full source code, 100's more DHTML scripts, and TOS, //visit http://www.dynamicdrive.com //Specify background images to slide var bgslides=new Array() bgslides[0]="http://www.ko-go.gr/restaurant/1a.jpg" bgslides[1]="http://www.ko-go.gr/restaurant/2a.jpg" bgslides[2]="http://www.ko-go.gr/restaurant/3a.jpg" bgslides[3]="http://www.ko-go.gr/restaurant/4a.jpg" //preload images var processed=new Array() for (i=0;i<bgslides.length;i++){ processed[i]=new Image() processed[i].src=bgslides[i] } </script> <style type="text/css">  </style> </head> <body> <div id="bg" > <img src="http://www.vicsjavascripts.org.uk/StdImages/1.gif"> <img src="http://www.vicsjavascripts.org.uk/StdImages/2.gif"> <img src="http://www.vicsjavascripts.org.uk/StdImages/3.gif"> <img src="http://www.vicsjavascripts.org.uk/StdImages/4.gif"> </div> <table id="wrapper" style="z-Index:101;" > <tr> <td> <div class="image"><img src="http://www.ko-go.gr/restaurant/blackboard.png" alt=""> <div class="text"><h1>COASTMED</h1> <p>THE TOP RESTAURANT IN GOUVES <br> - SPECIALISING IN BOTH CRETAN <br> AND GREEK CUISINE.</p> </div> </div> </td> </tr> </table> <script type="text/javascript"> // Animate (11-January-2010) // by Vic Phillips http://www.vicsjavascripts.org.uk // **** Functional Code(1.58K) - NO NEED to Change function zxcAnimate(mde,obj,srt){ this.to=null; this.obj=typeof(obj)=='object'?obj:document.getElementById(obj); this.mde=mde.replace(/\W/g,''); this.data=[srt||0]; return this; } zxcAnimate.prototype.animate=function(srt,fin,ms,scale,c){ clearTimeout(this.to); this.time=ms||this.time||0; this.neg=srt<0||fin<0; this.data=[srt,srt,fin]; this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0]))); this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:''; this.inc=Math.PI/(2*this.mS); this.srttime=new Date().getTime(); this.cng(); } zxcAnimate.prototype.cng=function(){ var oop=this,ms=new Date().getTime()-this.srttime; this.data[0]=(this.c=='s')?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:(this.c=='c')?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1]; this.apply(); if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10); else { this.data[0]=this.data[2]; this.apply(); if (this.Complete) this.Complete(this); } } zxcAnimate.prototype.apply=function(){ if (isFinite(this.data[0])){ if (this.data[0]<0&&!this.neg) this.data[0]=0; if (this.mde!='opacity') this.obj.style[this.mde]=Math.floor(this.data[0])+'px'; else zxcOpacity(this.obj,this.data[0]); } } function zxcOpacity(obj,opc){ if (opc<0||opc>100) return; obj.style.filter='alpha(opacity='+opc+')'; obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001; } </script> <script type="text/javascript">  </script> </body> </html>

Excellent! Thank you so much, it works. Only thing, is there a way to change it so that it does random, but the next image is never the previous image?

For example, so it could never do this: 7454
but rather 7451 or 7452 or 7453 or 7456 or 7457

Do you follow?

UPDATE:

My fix in the previous post, doesn't work in IE and some other browsers, so you need to add in this CSS to make it work with all the browsers:

Code:

#bg img { /* IE 8+ */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 5-7 */ filter: alpha(opacity=0); /* Netscape */ -moz-opacity: -0.001; /* Safari 1.x */ -khtml-opacity: -0.001; /* Good browsers */ opacity: -0.001; }

Ok but I still need to know how to change it so that it does random images (using the code in post #15), but so that the next image is never the previous image.

the code #15 prevents repeating the same image with the code in red

Code:

BGFade.prototype.Rotate=function(nu,srt){ var o=this; o.bgs[nu].obj.style.zIndex='0'; o.bgs[nu].animate(100,0,o.ms); if (srt||!o.r){ nu=++nu%o.bgs.length; } else { nu=Math.floor(Math.random()*o.bgs.length); while(nu==o.nu){ nu=Math.floor(Math.random()*o.bgs.length); } } o.bgs[nu].obj.style.zIndex='1'; o.bgs[nu].obj.style.left=-(o.bgs[nu].obj.width-zxcWWHS()[0])/2+'px'; // horizontal center o.bgs[nu].obj.style.top=-(o.bgs[nu].obj.height-zxcWWHS()[1])/2+'px'; // vertical center o.bgs[nu].animate(0,100,o.ms); o.nu=nu; o.to=setTimeout(function(){ o.Rotate(nu); },o.hold); }

Quote:

Originally Posted by vwphillips

the code #15 prevents repeating the same image with the code in red

Code:

BGFade.prototype.Rotate=function(nu,srt){ var o=this; o.bgs[nu].obj.style.zIndex='0'; o.bgs[nu].animate(100,0,o.ms); if (srt||!o.r){ nu=++nu%o.bgs.length; } else { nu=Math.floor(Math.random()*o.bgs.length); while(nu==o.nu){ nu=Math.floor(Math.random()*o.bgs.length); } } o.bgs[nu].obj.style.zIndex='1'; o.bgs[nu].obj.style.left=-(o.bgs[nu].obj.width-zxcWWHS()[0])/2+'px'; // horizontal center o.bgs[nu].obj.style.top=-(o.bgs[nu].obj.height-zxcWWHS()[1])/2+'px'; // vertical center o.bgs[nu].animate(0,100,o.ms); o.nu=nu; o.to=setTimeout(function(){ o.Rotate(nu); },o.hold); }

Ok but how do you make it so it doesn't repeat the same image or the one before?

Solved

I had the same problem as you, sdfagahetehr. Thank you for letting us know how to fix it. It's almost perfect now. I had another similar problem and that is that the last image would appear just before the first image appeared and on Google Chrome and Safari the first image would be shifted to the right by a large amount.

Can anyone help me there or do you need to look at my code since I did make some changes to get it to suit my requirements?