Fading Rotating Background Images?

Hi,

I've started on a page at:

http://www.ko-go.gr/restaurant/index1a.html

using Background Image Slideshow- © Dynamic Drive to rotate the background images.

I would prefer that these images faded from one to another, as in Ultimate Fade-in slideshow (v2.1), but I don't know how to achieve this.

Perhaps someone knows of code that will do what I want - or perhaps better - how to alter Ultimate Fade-in or Background Image Slideshow to do the trick!

Thanks for taking the time to read this...:confused:

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.ko-go.gr/restaurant/1a.jpg"> <img src="http://www.ko-go.gr/restaurant/2a.jpg"> <img src="http://www.ko-go.gr/restaurant/3a.jpg"> <img src="http://www.ko-go.gr/restaurant/4a.jpg"> </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 // To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time. // With the ability to scale the effect time on specified minimum/maximum values // and with three types of progression 'sin' and 'cos' and liner. // **** Application Notes // **** The HTML Code // // when moving an element the inline or class rule style position of the element should be assigned as // 'position:relative;' or 'position:absolute;' // // The element would normally be assigned a unique ID name. // // **** Initialising the Script. // // The script is initialised by assigning an instance of the script to a variable. // e.g A = new zxcAnimate('left','id1') // where: // A = a global variable (variable) // parameter 0 = the mode(see Note 1). (string) // parameter 1 = the unique ID name or element object. (string or element object) // parameter 1 = the initial value. (digits, default = 0) // **** Executing the Effect // // The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);' // where: // A = the global referencing the script instance. (variable) // parameter 0 = the start value. (digits, for opacity minimum 0, maximum 100) // parameter 1 = the finish value. (digits, for opacity minimum 0, maximum 100) // parameter 2 = period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds) // parameter 3 = (optional) to scale the effect time on a specified minimum/maximum. (array, see Note 3) // field 0 the minimum value. (digits) // field 1 the maximum value. (digits) // parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'. (string, default = 'liner') // 'sin' progression starts fast and ends slow. // 'cos' progression starts slow and ends fast. // // Note 1: Examples modes: 'left', 'top', 'width', 'height', 'opacity. // Note 2: The default units(excepting opacity) are 'px'. // For hyphenated modes, the first character after the hyphen must be upper case, all others lower case. // Note 3: The scale is of particular use when re-calling the effect // in mid progression to retain an constant rate of progression. // Note 4: The current effect value is recorded in A.data[0]. // Note 5: A function may be called on completion of the effect by assigning the function // to the animator intance property .Complete. // e.g. [instance].Complete=function(){ alert(this.data[0]); }; // // **** 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>

Thanks Vic

Hi Vic,

Thanks very much for your guidance (and for the code, of course!) :)

I've uploaded it all to http://www.ko-go.gr/restaurant/index.html

What do you think?

I don't understand all your parameter settings (I'm a real beginner at this) so my questions are:

1) Can we make the fade transitions "smoother"?

2) Can keep the blackboard.png image with the text superimposed on it in the centre of the window even when we drop to lower screen resolutions such as 1024 x 768?

Even if you don't have the time to help answer, many thanks for getting me this far!!!

John :confused:

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.ko-go.gr/restaurant/1a.jpg"> <img src="http://www.ko-go.gr/restaurant/2a.jpg"> <img src="http://www.ko-go.gr/restaurant/3a.jpg"> <img src="http://www.ko-go.gr/restaurant/4a.jpg"> </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 // To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time. // With the ability to scale the effect time on specified minimum/maximum values // and with three types of progression 'sin' and 'cos' and liner. // **** Application Notes // **** The HTML Code // // when moving an element the inline or class rule style position of the element should be assigned as // 'position:relative;' or 'position:absolute;' // // The element would normally be assigned a unique ID name. // // **** Initialising the Script. // // The script is initialised by assigning an instance of the script to a variable. // e.g A = new zxcAnimate('left','id1') // where: // A = a global variable (variable) // parameter 0 = the mode(see Note 1). (string) // parameter 1 = the unique ID name or element object. (string or element object) // parameter 1 = the initial value. (digits, default = 0) // **** Executing the Effect // // The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);' // where: // A = the global referencing the script instance. (variable) // parameter 0 = the start value. (digits, for opacity minimum 0, maximum 100) // parameter 1 = the finish value. (digits, for opacity minimum 0, maximum 100) // parameter 2 = period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds) // parameter 3 = (optional) to scale the effect time on a specified minimum/maximum. (array, see Note 3) // field 0 the minimum value. (digits) // field 1 the maximum value. (digits) // parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'. (string, default = 'liner') // 'sin' progression starts fast and ends slow. // 'cos' progression starts slow and ends fast. // // Note 1: Examples modes: 'left', 'top', 'width', 'height', 'opacity. // Note 2: The default units(excepting opacity) are 'px'. // For hyphenated modes, the first character after the hyphen must be upper case, all others lower case. // Note 3: The scale is of particular use when re-calling the effect // in mid progression to retain an constant rate of progression. // Note 4: The current effect value is recorded in A.data[0]. // Note 5: A function may be called on completion of the effect by assigning the function // to the animator intance property .Complete. // e.g. [instance].Complete=function(){ alert(this.data[0]); }; // // **** 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>

the lack of smothness is due to the size of the images.

Quote:

Originally Posted by vwphillips

.

I have a problem with this, it is a strange bug. If you have more than 3 images (4 or more images), then what happens is instead of fading into the next image, it instead fades into the next-to-last image. It works fine if you have only three images. But I need 6 images.

For example, if I have 6 images, then:
image #1 appears,
then image #1 fades into image #5 and then image #2 appears,
then image #2 fades into image #5 and then image #3 appears,
then image #3 fades into image #5 and then image #4 appears,
then image #4 fades into image #5 and then image #5 appears,
then image #5 fades into image #6 and then image #6 appears,
then image #6 fades into image #1 and then image #1 appears

as you see, when it gets to the next-to-last image, it starts to work normally. But if you reload the page the cycle starts over again with this weird bug.

but what SHOULD happen, is:
image #1 appears,
then image #1 fades into image #2,
then image #2 fades into image #3,
then image #3 fades into image #4,
then image #4 fades into image #5,
then image #5 fades into image #6,
then image #6 fades into image #1

Can you please tell me how to fix this so the fade works correctly for more than 3 images?

It is not a problem with images being too big. Same thing happens if it's 1px x 1px image.

i have tested the script in post #5 and it sequences correctly

please post a link to your poage

Quote:

Originally Posted by vwphillips

i have tested the script in post #5 and it sequences correctly

please post a link to your poage

No, it doesn't work correctly.

Here I put the code into jsfiddle and uploaded some test images: http://jsfiddle.net/6CWud/10/

Moreover, what's weird is if you remove !important from the CSS it forces the rotating script to the middle of the page no matter what, and puts the test5 image in the top left. When the script gets to image #5 then the test5 image disappears. The fact that this image is displaying apart from the rotating script seems to be the problem here.

Help me fix this and then this will be the perfect script! Thank you.

Quote:

Originally Posted by vwphillips

i have tested the script in post #5 and it sequences correctly

please post a link to your poage

No, it does not work correctly.

See here at this jsfiddle that it doesn't work correctly: http://jsfiddle.net/6CWud/10/

I'm not sure why your posts are being deleted or why I am unable to send you a private message about it either. Hopefully after looking over your deleted posts we can find out why the filter chose to auto moderate several of your posts.

Quote:

Originally Posted by james438

I'm not sure why your posts are being deleted or why I am unable to send you a private message about it. Hopefully after looking over your deleted posts we can find out why the filter chose to auto moderate several of your posts.

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