Page 2 of 2 FirstFirst 12
Results 11 to 20 of 20

Thread: Fading Rotating Background Images?

  1. #11
    Join Date
    Feb 2013
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.)
    Last edited by sdfagahetehr; 02-16-2013 at 10:25 PM.

  2. #12
    Join Date
    Feb 2013
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    SOLVED!!!! YAY!!!!

    Ok so you need to add the following CSS:

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

    Code:
    #bg {
      position: absolute;
      z-Index:0;
    }
    
    #bg img {
      position: absolute;
      top: 50px !important;
      left: 50px !important;
      opacity: -0.001;
    }
    http://jsfiddle.net/6CWud/16/

  3. #13
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    1,740
    Thanks
    82
    Thanked 90 Times in 88 Posts

    Default

    Quote Originally Posted by sdfagahetehr View Post
    [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.
    To choose the lesser of two evils is still to choose evil. My personal site

  4. #14
    Join Date
    Feb 2013
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Now that I fixed the main issue,
    one more thing, how can I randomize the images, but always starting with image #1?
    Last edited by sdfagahetehr; 02-16-2013 at 10:50 PM.

  5. #15
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,814
    Thanks
    2
    Thanked 424 Times in 418 Posts

    Default

    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">
    <!--
       html, body, #wrapper {
          height:100%;
          margin: 0;
          padding: 0;
          border: none;
          text-align: center;
          overflow:hidden;
       }
       #wrapper {
          margin: 0 auto;
          text-align: center;
          vertical-align: top;
          width: 550px;
       }
       .image {
    	position:relative;
    	float:left; /* optional */
       }
       .image .text {
    	position:absolute;
    	top:30px; /* in conjunction with left property, decides the text position */
    	left:0;
    	width:550px; /* optional, though better have one */
        }
        p {
    	font-family:Trajan Pro, serif;
    	font-size:medium;
    	font-weight:bold;
    	color:white;
    	}
    	h1 {
    	font-family:Trajan Pro, serif;
    	font-weight:bold;
    	font-size:x-large;
    	color:white;
    	text-align:center;
        }
        body {
        background-attachment:fixed;
        background-repeat: no-repeat;
        /*Use center center in place of 300 200 to center bg image*/
        background-position: center;
        }
    
    #bg {
      position:absolute;z-Index:0;left:0px;top:0px;
    }
    
    #bg IMG{
      position:absolute;left:0px;top:0px;
    }
    
    -->
    </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">
    <!--
    
    function BGFade(o){
     var p=document.getElementById(o.ID)
     if (p){
      var bgs=p.getElementsByTagName('IMG');
      this.bgs=[];
      for (var z0=0;z0<bgs.length;z0++){
       this.bgs[z0]=new zxcAnimate('opacity',bgs[z0]);
      }
      this.nu=z0-1;
      this.ms=o.Duration||1000;
      this.hold=o.Hold||this.ms*2;
      this.r=o.Random===true&&this.bgs.length>2;
      if(this.nu>0){
       this.Rotate(z0-1,true);
      }
     }
    }
    
    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);
    }
    
    function zxcByClassName(nme,el,tag){
     if (typeof(el)=='string') el=document.getElementById(el);
     el=el||document;
     for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
      if(reg.test(els[z0].className)) ary.push(els[z0]);
     }
     return ary;
    }
    
    function zxcWWHS(){
     if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
     else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
     return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
    }
    
    
    new BGFade({
     ID:'bg',        // the unique id name of the container div.                    (string)
     Duration:1000,  // the duration of the fade effect in milli seconds.           (digits)
     Hold:2000,       // the duration of the change between images in milli seconds. (digits)
     Random:true
    });
    //-->
    </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/

  6. #16
    Join Date
    Feb 2013
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by vwphillips View Post
    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">
    <!--
       html, body, #wrapper {
          height:100%;
          margin: 0;
          padding: 0;
          border: none;
          text-align: center;
          overflow:hidden;
       }
       #wrapper {
          margin: 0 auto;
          text-align: center;
          vertical-align: top;
          width: 550px;
       }
       .image {
    	position:relative;
    	float:left; /* optional */
       }
       .image .text {
    	position:absolute;
    	top:30px; /* in conjunction with left property, decides the text position */
    	left:0;
    	width:550px; /* optional, though better have one */
        }
        p {
    	font-family:Trajan Pro, serif;
    	font-size:medium;
    	font-weight:bold;
    	color:white;
    	}
    	h1 {
    	font-family:Trajan Pro, serif;
    	font-weight:bold;
    	font-size:x-large;
    	color:white;
    	text-align:center;
        }
        body {
        background-attachment:fixed;
        background-repeat: no-repeat;
        /*Use center center in place of 300 200 to center bg image*/
        background-position: center;
        }
    
    #bg {
      position:absolute;z-Index:0;left:0px;top:0px;
    }
    
    #bg IMG{
      position:absolute;left:0px;top:0px;
    }
    
    -->
    </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">
    <!--
    
    function BGFade(o){
     var p=document.getElementById(o.ID)
     if (p){
      var bgs=p.getElementsByTagName('IMG');
      this.bgs=[];
      for (var z0=0;z0<bgs.length;z0++){
       this.bgs[z0]=new zxcAnimate('opacity',bgs[z0]);
      }
      this.nu=z0-1;
      this.ms=o.Duration||1000;
      this.hold=o.Hold||this.ms*2;
      this.r=o.Random===true&&this.bgs.length>2;
      if(this.nu>0){
       this.Rotate(z0-1,true);
      }
     }
    }
    
    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);
    }
    
    function zxcByClassName(nme,el,tag){
     if (typeof(el)=='string') el=document.getElementById(el);
     el=el||document;
     for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
      if(reg.test(els[z0].className)) ary.push(els[z0]);
     }
     return ary;
    }
    
    function zxcWWHS(){
     if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
     else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
     return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
    }
    
    
    new BGFade({
     ID:'bg',        // the unique id name of the container div.                    (string)
     Duration:1000,  // the duration of the fade effect in milli seconds.           (digits)
     Hold:2000,       // the duration of the change between images in milli seconds. (digits)
     Random:true
    });
    //-->
    </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?

  7. #17
    Join Date
    Feb 2013
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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:

    Code:
    #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), but so that the next image is never the previous image.

  8. #18
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,814
    Thanks
    2
    Thanked 424 Times in 418 Posts

    Default

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

    Code:
    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);
    }
    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/

  9. #19
    Join Date
    Feb 2013
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by vwphillips View Post
    the code #15 prevents repeating the same image with the code in red

    Code:
    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);
    }
    Ok but how do you make it so it doesn't repeat the same image or the one before?

  10. #20
    Join Date
    Jun 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Solved

    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?
    Last edited by KeredDrahcir; 06-05-2013 at 09:55 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
  •