Changing background color in Ultimate Fade In Slideshow

**BelowZero** · 01-08-2015, 11:23 PM

1) Script Title: Ultimate Fade In Slideshow v2.6

2) Script URL (on DD):

3) Describe problem: I've used previous versions of this script with good results. In the past I was able to change the background from black to another color. I use images with rounded corners so I don't want the corners to be black when the background of the div is another color. In previous versions I used this statement: var fadebgcolor="#250c05" but it won't work in the newer version.
Can someone let me know how to change the background in V2.6?

Also, I can't use 2 percentages to size the slideshow. I can use "dimensions: ["100%", 300]" and it works fine, but I can't use "dimensions: ["100%", "100%"]. The slideshow simply doesn't show up when I try. Any fixes to this problem?

The URL is www.yorkumc.com

Thanks!

**ddadmin** · 01-09-2015, 06:08 AM

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

To change the background color of the slideshow, just do a search and replace of background:'black' inside the .js file

Also, I can't use 2 percentages to size the slideshow. I can use "dimensions: ["100%", 300]" and it works fine, but I can't use "dimensions: ["100%", "100%"].

The way the height property behaves in CSS means you can't define it in terms of s % value, at least not for the slideshow. The height can be dynamic, but it'll have to be specific px based values using CSS media queries. The section "CSS media queries" on this page talks about this in more detail.

**vwphillips** · 01-09-2015, 12:44 PM

with % width and auto height

Code:

<!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" xml:lang="en" lang="en">

<head>
  <title></title>
  <base href="http://www.yorkumc.com/"  />
<style type="text/css">
/*<![CDATA[*/

.layer6		{
		Width:50%;
		-moz-border-radius: 15px;
		border-radius: 15px;
		border: 1px solid yellow;
		margin: 1% 0 0 0;
		padding: 5%;
		background-color:#0f0736;
}

#slideshow {
  position:relative;width:400px;height:300px;border:solid red 1px;
}

/*]]>*/
</style></head>

<body>
 <div class="layer6" >
  <div id="slideshow" ></div>
 </div>
<script type="text/javascript">
/*<![CDATA[*/
//  FadeSlideShow (09-January-2015)
// by Vic Phillips - http://www.vicsjavascripts.org/StdImages/


function zxcFadeSlideShow(o){
 var p=document.getElementById(o.wrapperid),a=o.imagearray,sz=o.width,ms=o.fadeduration,h=o.autohold,s=o.autostart;
 if (p&&a instanceof Array){
  var i,z0=0;
  p.style.width=sz;
  o.a=[];
  for (;z0<a.length;z0++){
   i=document.createElement('IMG');
   i.style.position='absolute';
   i.style.visibility='hidden';
   i.src=a[z0][0];
   i.style.width='100%';
   o.a[z0]=[i,new Image(),z0!=0?0:100];
   o.a[z0][1].src=i.src;
   this.opc(o.a[z0][0],o.a[z0][2]);
   p.appendChild(i);
  }
  o.p=p;
  o.n=0;
  o.lgth=z0-1;
  o.ms=typeof(ms)=='number'&&ms>0?ms:1000;
  o.h=typeof(ms)=='number'&&h>0?h:o.ms*4;
  this.o=o;
  this.rotate(o,0);
  typeof(s)=='number'&&s>0?this.Auto(s):null;
 }
}

zxcFadeSlideShow.prototype={

 GoTo:function(u){
  var oop=this,o=oop.o;
  this.Pause();
  o.a[n]?oop.rotate(o,n):null;
 },

 Next:function(ud){
  ud=typeof(ud)=='number'&&ud<0?-1:1
  var oop=this,o=oop.o;
  oop.rotate(o,o.n+ud);
 },

 Auto:function(ms){
  var oop=this,o=oop.o;
  o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200);
 },

 Pause:function(){
  var oop=this,o=oop.o;
  o.auto=false;
  clearTimeout(o.to);
 },

 rotate:function(o,n){
  this.Pause();
  for (var oop=this,z0=0;z0<o.a.length;z0++){
   if (o.a[z0][1].width<40){
    return o.to=setTimeout(function(){ oop.rotate(o,n); },200);
   }
   else {
    o.a[z0][0].style.height=o.a[z0][0].width*(o.a[z0][1].height/o.a[z0][1].width)+'px';
   }
  }
  o.auto=n===true;
  n=o.auto?o.n+1:n;
  o.wraparound!==false?n=n<0?o.lgth:n>o.lgth?0:n:null;
  if (o.a[n]){
   this.animate(o,o.a[o.n],o.a[o.n][2],0,new Date(),o.ms);
   o.a[n][0].style.visibility='visible';
   this.animate(o,o.a[n],o.a[n][2],100,new Date(),o.ms);
   o.p.style.height=o.a[n][0].height+'px';
   o.n=n;
  }
 },

 animate:function(o,a,f,t,srt,mS){
 this.Pause
  clearTimeout(a[4]);
  var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
  if (isFinite(n)){
   a[2]=Math.max(0,n);
   this.opc(a[0],a[2]);
  }
  if (ms<mS){
   a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
  }
  else {
   a[2]=t;
   this.opc(a[0],t);
   t==0?a[0].style.visibility='hidden':null;
   t==100&&o.auto?oop.Auto(o.h):null;
  }
 },

 opc:function(o,n){
  o.style.filter='alpha(opacity='+n+')';
  o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
 }




}

var mygallery=new zxcFadeSlideShow({
	wrapperid: "slideshow", //ID of blank DIV on page to house Slideshow
	width: "100%",       //width of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["/A-Images/Slideshow1.png", "", "", ""],
		["/A-Images/Slideshow2.png", "", "", ""],
		["/A-Images/Slideshow3.png", "", "", ""],
		["/A-Images/Slideshow4.png", "", "", ""],
		["/A-Images/Slideshow5.png", "", "", ""],
		["/A-Images/Slideshow6.png", "", "", ""] //<--no trailing comma after very last image element!
	],
    wraparound:false,
	fadeduration: 700, //transition duration (milliseconds)
    autohold:2000,     // auto hold duration (milliseconds)
    autostart:2000     // auto start delay (milliseconds)
})
/*]]>*/
</script>
</body>

</html>

**BelowZero** · 01-09-2015, 03:26 PM

Thank you both!

**vwphillips** · 01-09-2015, 04:11 PM

I left a line out(marked in red)

Code:

<!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" xml:lang="en" lang="en">

<head>
  <title></title>
  <base href="http://www.yorkumc.com/"  />
<style type="text/css">
/*<![CDATA[*/

.layer6		{
		Width:50%;
		-moz-border-radius: 15px;
		border-radius: 15px;
		border: 1px solid yellow;
		margin: 1% 0 0 0;
		padding: 5%;
		background-color:#0f0736;
}

#slideshow {
  position:relative;width:400px;height:300px;border:solid red 1px;
}

/*]]>*/
</style></head>

<body>
 <div class="layer6" >
  <div id="slideshow" ></div>
 </div>
<script type="text/javascript">
/*<![CDATA[*/
//  FadeSlideShow (09-January-2015)
// by Vic Phillips - http://www.vicsjavascripts.org/StdImages/


function zxcFadeSlideShow(o){
 var p=document.getElementById(o.wrapperid),a=o.imagearray,sz=o.width,ms=o.fadeduration,h=o.autohold,s=o.autostart;
 if (p&&a instanceof Array){
  var i,z0=0;
  p.style.width=sz;
  o.a=[];
  for (;z0<a.length;z0++){
   i=document.createElement('IMG');
   i.style.position='absolute';
   i.style.left=i.style.top='0px';
   i.style.visibility='hidden';
   i.src=a[z0][0];
   i.style.width='100%';
   o.a[z0]=[i,new Image(),z0!=0?0:100];
   o.a[z0][1].src=i.src;
   this.opc(o.a[z0][0],o.a[z0][2]);
   p.appendChild(i);
  }
  o.p=p;
  o.n=0;
  o.lgth=z0-1;
  o.ms=typeof(ms)=='number'&&ms>0?ms:1000;
  o.h=typeof(ms)=='number'&&h>0?h:o.ms*4;
  this.o=o;
  this.rotate(o,0);
  typeof(s)=='number'&&s>0?this.Auto(s):null;
 }
}

zxcFadeSlideShow.prototype={

 GoTo:function(u){
  var oop=this,o=oop.o;
  this.Pause();
  o.a[n]?oop.rotate(o,n):null;
 },

 Next:function(ud){
  ud=typeof(ud)=='number'&&ud<0?-1:1
  var oop=this,o=oop.o;
  oop.rotate(o,o.n+ud);
 },

 Auto:function(ms){
  var oop=this,o=oop.o;
  o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200);
 },

 Pause:function(){
  var oop=this,o=oop.o;
  o.auto=false;
  clearTimeout(o.to);
 },

 rotate:function(o,n){
  this.Pause();
  for (var oop=this,z0=0;z0<o.a.length;z0++){
   if (o.a[z0][1].width<40){
    return o.to=setTimeout(function(){ oop.rotate(o,n); },200);
   }
   else {
    o.a[z0][0].style.height=o.a[z0][0].width*(o.a[z0][1].height/o.a[z0][1].width)+'px';
   }
  }
  o.auto=n===true;
  n=o.auto?o.n+1:n;
  o.wraparound!==false?n=n<0?o.lgth:n>o.lgth?0:n:null;
  if (o.a[n]){
   this.animate(o,o.a[o.n],o.a[o.n][2],0,new Date(),o.ms);
   o.a[n][0].style.visibility='visible';
   this.animate(o,o.a[n],o.a[n][2],100,new Date(),o.ms);
   o.p.style.height=o.a[n][0].height+'px';
   o.n=n;
  }
 },

 animate:function(o,a,f,t,srt,mS){
  this.Pause
  clearTimeout(a[4]);
  var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
  if (isFinite(n)){
   a[2]=Math.max(0,n);
   this.opc(a[0],a[2]);
  }
  if (ms<mS){
   a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
  }
  else {
   a[2]=t;
   this.opc(a[0],t);
   t==0?a[0].style.visibility='hidden':null;
   t==100&&o.auto?oop.Auto(o.h):null;
  }
 },

 opc:function(o,n){
  o.style.filter='alpha(opacity='+n+')';
  o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
 }




}

var mygallery=new zxcFadeSlideShow({
	wrapperid: "slideshow", //ID of blank DIV on page to house Slideshow
	width: "100%",       //width of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["/A-Images/Slideshow1.png", "", "", ""],
		["/A-Images/Slideshow2.png", "", "", ""],
		["/A-Images/Slideshow3.png", "", "", ""],
		["/A-Images/Slideshow4.png", "", "", ""],
		["/A-Images/Slideshow5.png", "", "", ""],
		["/A-Images/Slideshow6.png", "", "", ""] //<--no trailing comma after very last image element!
	],
    wraparound:false,
	fadeduration: 700, //transition duration (milliseconds)
    autohold:2000,     // auto hold duration (milliseconds)
    autostart:2000     // auto start delay (milliseconds)
})
/*]]>*/
</script>
</body>

</html>