Results 1 to 5 of 5

Thread: Changing background color in Ultimate Fade In Slideshow

  1. #1
    Join Date
    Nov 2009
    Posts
    29
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default Changing background color in Ultimate Fade In Slideshow

    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!

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

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

  3. The Following User Says Thank You to ddadmin For This Useful Post:

    BelowZero (01-09-2015)

  4. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. #4
    Join Date
    Nov 2009
    Posts
    29
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Thank you both!

  6. #5
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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>
    Last edited by vwphillips; 01-09-2015 at 04:18 PM.
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Similar Threads

  1. Ultimate Fade-in slideshow - Replace background color with image?
    By vegeman in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 03-20-2013, 03:32 PM
  2. Background color for Ultimate Fade-in slideshow
    By Arnor in forum Dynamic Drive scripts help
    Replies: 12
    Last Post: 07-13-2010, 08:02 AM
  3. Resolved Ultimate Fade-in Slideshow - Changing Border Colour
    By Andy from Somerset in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 03-19-2009, 06:31 AM
  4. Changing border color on Ultimate Image Slideshow?
    By jackofall in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 07-06-2008, 09:40 PM
  5. Ultimate Fade-In Slideshow (v1.5) changing images in other frames
    By inta in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 10-02-2006, 02:03 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •