PDA

View Full Version : 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 (http://www.dynamicdrive.com/forums/showthread.php?t=6) 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 (http://www.dynamicdrive.com/dynamicindex14/responsiveslideshowguide.htm) talks about this in more detail.

vwphillips
01-09-2015, 12:44 PM
with % width and auto height


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


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