Fading Rotating Background Images? [Archive]

View Full Version : Fading Rotating Background Images?

jbmclaren

02-22-2010, 04:27 AM

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:

vwphillips

02-22-2010, 09:50 AM

<!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>

jbmclaren

02-23-2010, 07:11 AM

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:

vwphillips

02-23-2010, 09:55 AM

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

sdfagahetehr

02-16-2013, 06:51 AM

.

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.

vwphillips

02-16-2013, 12:53 PM

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

please post a link to your poage

sdfagahetehr

02-16-2013, 09:26 PM

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.

sdfagahetehr

02-16-2013, 09:56 PM

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/

james438

02-16-2013, 10:08 PM

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.

sdfagahetehr

02-16-2013, 10:14 PM

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

sdfagahetehr

02-16-2013, 10:18 PM

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

sdfagahetehr

02-16-2013, 10:21 PM

SOLVED!!!! YAY!!!!

Ok so you need to add the following CSS:

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

#bg {
position: absolute;
z-Index:0;
}

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

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

james438

02-16-2013, 10:21 PM

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

sdfagahetehr

02-16-2013, 10:39 PM

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

vwphillips

02-19-2013, 03:26 AM

<!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>

sdfagahetehr

02-24-2013, 01:07 AM

<!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?

sdfagahetehr

03-02-2013, 06:24 AM

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:

#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 (http://www.dynamicdrive.com/forums/showthread.php?52588-Fading-Rotating-Background-Images&p=290859#post290859)), but so that the next image is never the previous image.

vwphillips

03-02-2013, 11:38 AM

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

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);
}

sdfagahetehr

03-13-2013, 05:44 PM

KeredDrahcir

06-03-2013, 04:24 PM

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?