Results 1 to 9 of 9

Thread: Fade Slide Show (26-July-2012) by Vic Phillips - Help

  1. #1
    Join Date
    Dec 2009
    Location
    NY NY USA
    Posts
    228
    Thanks
    158
    Thanked 1 Time in 1 Post

    Default Fade Slide Show (26-July-2012) by Vic Phillips - Help

    Hi guys:

    I adapted the "Fade Slide Show (26-July-2012)" by Vic Phillips and it works just fine in IE.
    In Firefox however, it works well only if the page is refreshed after the initial page load.
    Before the page is refreshed, images going to the "loadarea" load very small at the top of
    the page and then they display abruptly. What could be the problem?

    Test Page

    The loading Area:
    Code:
    <div style=" margin-top:20px; text-align:center;">
    
    <img id="loadarea" src="images/samples/640X1136-samples/billy-joe-640X1136-sample.jpg" alt="Billy Joe Conor" name="Billy Joe Conor" width="257" height="457" style="text-align:center; vertical-align: middle; margin-top:1px; margin-bottom:9px;"></div>
    Four Thumbnail Images:
    Code:
    <div class="left" style="width:178px; height:222px; margin-top:0px; margin-right:0px; margin-left:51px;"><a 
    href="generate20141216.php?which=billyjoe" 
    onmouseover="zxcFadeSS.GoTo('loadarea',1)" onmouseout="zxcFadeSS.GoTo('loadarea',1)" 
    class="highlightit">
    <img src="images/samples/176X220-samples/billy-joe-176X220-sample.jpg" alt="Billy Joe Conor" name="Billy Joe Conor" width="176" height="220" border="0" onclick="blur(this)"></a></div>
    
    <div class="right" style="width:178px; height:222px; margin-top:0px; margin-right:51px; margin-left:0px;"><a 
    href="generate20141216.php?which=guitar" 
    onmouseover="zxcFadeSS.GoTo('loadarea',2)" onmouseout="zxcFadeSS.GoTo('loadarea',1)"
    class="highlightit">
    <img src="images/samples/176X220-samples/guitar-176X220-sample.jpg" alt="Billy Joe Conor" name="Billy Joe Conor" width="176" height="220" border="0" onfocus="blur(this)"></a></div>
    
    <div class="left" style="width:178px; height:222px; margin-top:20px; margin-right:0px; margin-left:51px;">
    <a href="generate20141216.php?which=guitar2" 
    onmouseover="zxcFadeSS.GoTo('loadarea',3)" onmouseout="zxcFadeSS.GoTo('loadarea',1)" 
    class="highlightit">
    <img src="images/samples/176X220-samples/guitar-2-176X220-sample.jpg" alt="Billy Joe Conor" name="Billy Joe Conor" width="176" height="220" border="0" onfocus="blur(this)"></a></div>
    
    <div class="right" style="width:178px; height:222px; margin-top:20px;  margin-right:51px; margin-left:0px;">
    <a href="generate20141216.php?which=guitar3" 
    onmouseover="zxcFadeSS.GoTo('loadarea',4)" onmouseout="zxcFadeSS.GoTo('loadarea',1)"
    class="highlightit">
    <img src="images/samples/176X220-samples/guitar-3-176X220-sample.jpg" alt="Billy Joe Conor" name="Billy Joe Conor" width="176" height="220" border="0" onfocus="blur(this)"></a></div>
    The Script:
    Code:
    <script type="text/javascript">
    /*<![CDATA[*/
    // Fade Slide Show (26-July-2012)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    var zxcFadeSS={
    
     init:function(o){
      var id=o.ID,img=document.getElementById(id),ary=o.ImageArray,ms=o.FadeDuration,hold=o.HoldDuration,ms=typeof(ms)=='number'?ms:1000,hold=typeof(hold)=='number'?hold:ms*2,srt=o.AutoStart,clone=document.createElement('IMG'),src,z0=0;
      for (;z0<ary.length;z0++){
       src=ary[z0][0];
       ary[z0][0]=new Image();
       ary[z0][0].src=src;
      }
      clone.style.position='absolute';
      clone.style.zIndex='101';
      clone.style.left='-3000px';
      clone.style.top='-3000px';
      clone.style.width=img.width+'px';
      clone.style.height=img.height+'px';
      document.body.appendChild(clone);
      this['zxc'+o.ID]={
       id:id,
       img:img,
       a:img.parentNode,
       clone:clone,
       ary:ary,
       lgth:z0-1,
       ms:ms,
       hold:hold,
       cnt:0,
       ud:1
      };
      if (typeof(srt)=='number'){
       this.Auto(id,srt);
      }
     },
    
     Next:function(id,ud){
      var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
      if (o){
       o.ud=ud;
       this.inc(o,o.cnt+ud);
       this.rotate(o,false);
      }
     },
    
     GoTo:function(id,nu){
      var o=this['zxc'+id];
      if (o&&o.ary[nu]&&nu!=o.cnt){
       o.cnt=nu;
       this.rotate(o,false);
      }
     },
    
     Auto:function(id,ms){
      var oop=this,o=this['zxc'+id];
      if (o){
       o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200);
      }
     },
    
     Pause:function(id){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
       o.auto=false;
      }
     },
    
     inc:function(o,nu){
      o.cnt=nu>o.lgth?0:nu<0?o.lgth:nu
     },
    
     rotate:function(o,auto){
      var p=this.pos(o.img);
      this.Pause(o.id);
      o.auto=auto===true;
      if (o.auto){
       this.inc(o,o.cnt+o.ud);
      }
      o.a.removeAttribute('href');
      if (o.ary[o.cnt][1]){
       o.a.href=o.ary[o.cnt][1];
      }
      o.clone.src=o.ary[o.cnt][0].src;
      o.clone.style.left=p[0]+'px';
      o.clone.style.top=p[1]+'px';
      clearTimeout(o.dly);
      this.animate(o,0,100,new Date(),o.ms);
     },
    
     animate:function(o,f,t,srt,mS){
      var oop=this,obj=o.clone,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)){
       obj.style.filter='alpha(opacity='+now+')';
       obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
      }
      if (ms<mS){
       o.dly=setTimeout(function(){ oop.animate(o,f,t,srt,mS); },10);
      }
      else {
       o.img.src=obj.src
       obj.style.left='-3000px';
       if (o.auto){
        oop.Auto(o.id,o.hold);
       }
      }
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     }
    
    
    }
    
    zxcFadeSS.init({
     ID:'loadarea',   // the unique ID name of the image.                             (string)
     ImageArray:[       // an array defining the slide show images SRCs and link HREFs. (array)
      // field 0 = the fadein image src.                 (string)
      // field 1 = (optional)the href image pagent node. (string)
    ['http://www.billyjoeconor.com/freebies/cell-savers/images/samples/640X1136-samples/billy-joe-640X1136-sample.jpg'],
      ['http://www.billyjoeconor.com/freebies/cell-savers/images/samples/640X1136-samples/billy-joe-640X1136-sample.jpg'],
      ['http://www.billyjoeconor.com/freebies/cell-savers/images/samples/640X1136-samples/guitar-640X1136-sample.jpg'],
      ['http://www.billyjoeconor.com/freebies/cell-savers/images/samples/640X1136-samples/guitar-2-640X1136-sample.jpg'],
      ['http://www.billyjoeconor.com/freebies/cell-savers/images/samples/640X1136-samples/guitar-3-640X1136-sample.jpg'],
     ],
     FadeDuration:600 //(optional) the fade duration in milli seconds.                (number, default = 1000)
    });
    
    /*]]>*/
    </script>
    Last edited by KennyP; 12-31-2014 at 12:01 AM.

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

    Default

    this version preloads the images

    the images to be displayed should be the displayed size and optomised for the best results.

    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>
    <style type="text/css">
    /*<![CDATA[*/
    #thumbs {
      position:relative;
    }
    
    #thumbs IMG{
     width:176px;height:220px;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    <input type="button" name="" value="Auto" onclick="zxcFadeSlideShowII.Auto('billy');" />
    <input type="button" name="" value="Pause" onclick="zxcFadeSlideShowII.Pause('billy');" />
    <input type="button" name="" value="Next" onclick="zxcFadeSlideShowII.Next('billy',1);" />
    <input type="button" name="" value="Back" onclick="zxcFadeSlideShowII.Next('billy',-1);" />
    <input type="button" name="" value="GoTo 1" onclick="zxcFadeSlideShowII.GoTo('billy',0);" />
    <input type="button" name="" value="GoTo 2" onclick="zxcFadeSlideShowII.GoTo('billy',1);" />
    <input type="button" name="" value="GoTo 3" onclick="zxcFadeSlideShowII.GoTo('billy',2);" />
    <input type="button" name="" value="GoTo 4" onclick="zxcFadeSlideShowII.GoTo('billy',3);" />
    
    <br />
    <div id="thumbs" >
    <img src="http://www.billyjoeconor.com/freebies/cell-savers/images/samples/176X220-samples/billy-joe-176X220-sample.jpg" onmouseover="zxcFadeSlideShowII.GoTo('billy',0);" />
    <img src="http://www.billyjoeconor.com/freebies/cell-savers/images/samples/640X1136-samples/guitar-640X1136-sample.jpg" onmouseover="zxcFadeSlideShowII.GoTo('billy',1);" />
    <img src="http://www.billyjoeconor.com/freebies/cell-savers/images/samples/640X1136-samples/guitar-3-640X1136-sample.jpg" onmouseover="zxcFadeSlideShowII.GoTo('billy',2);" />
    <img src="http://www.billyjoeconor.com/freebies/cell-savers/images/samples/640X1136-samples/guitar-2-640X1136-sample.jpg" onmouseover="zxcFadeSlideShowII.GoTo('billy',3);" />
    </div>
    
    <div  id="loadarea" style=" margin-top:20px; text-align:center;">
     <img id="billy" src="http://www.billyjoeconor.com/freebies/cell-savers/images/samples/640X1136-samples/billy-joe-640X1136-sample.jpg" alt="Billy Joe Conor" name="Billy Joe Conor" width="257" height="457" style="text-align:center; vertical-align: middle; margin-top:1px; margin-bottom:9px;">
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Fade Slide Show II (07-11-2014)
    // by Vic Phillips - http://www.vicsjavascripts.org/
    
    
    var zxcFadeSlideShowII={
    
     GoTo:function(id,n){
      var o=this['zxc'+id];
      if (o){
       this.Pause(id);
       o.a[n]&&n!=o.n?this.rotate(o,n):null;
      }
     },
    
     Next:function(id,ud){
      var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
      if (o){
       o.ud=ud;
       this.rotate(o,o.n+ud);
      }
     },
    
     Auto:function(id,ms){
      var o=this['zxc'+id];
      if (o){
       o.to=setTimeout(function(){ o.oop.rotate(o,true); },ms||200);
      }
     },
    
     Pause:function(id){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
       o.auto=false;
      }
     },
    
     Init:function(o){
      var id=o.ImageID,a=o.ImageArray,li=o.LoadingImage,fi=o.FadeIn,h=o.AutoHold,s=o.AutoStart,i=document.getElementById(id);
      if (i&&a instanceof Array){
       o.id=id;
       o.i=i;
       o.lk=i.parentNode;
       i=document.createElement('IMG');   // create a clone to overlay the image when the SRC is changes
       i.style.position='absolute';
       i.style.zIndex='101';
       i.style.left=i.style.top='-3000px';
       document.body.appendChild(i);
       o.ci=[i,0];
       o.li=i.cloneNode(false);
       o.li.src=li;
       typeof(li)=='string'?document.body.appendChild(o.li):null
       o.a=a;
       o.fi=typeof(fi)=='number'&&fi>0?fi:1000;
       o.h=typeof(h)=='number'&&h>0?h:o.fi*4;
       o.l=a.length-1;
       o.oop=this;
       o.n=0;
       o.ud=1;
       this['zxc'+id]=o;
       typeof(s)=='number'&&s>0?this.Auto(id,s):null;
      }
     },
    
     load:function(o,a,src,n){
      clearTimeout(o.to);
      if (src.width<40){
       return o.to=setTimeout(function(){ zxcFadeSlideShowII.load(o,a,src,n); },210);
      }
      o.li.style.top='-3000px';
      a[0]=src;
      this.rotate(o,n,true);
     },
    
     rotate:function(o,a,pl){
      this.Pause(o.id);
      var p=this.pos(o.i),n=o.n,src;
      o.auto=a===true||pl===true;
      n=o.auto?n+o.ud:a;    // establish the index bumber of the next image
      n=n>o.l?0:n<0?o.l:n;  // ensure the image array index is >= 0  and < the ayyay length
      if (typeof(o.a[n][0])=='string'){
       src=new Image()
       src.src=o.a[n][0];
       o.li.style.left=p[0]+(o.i.width-o.li.width)/2+'px'; // position the clone image ober the featered image
       o.li.style.top=p[1]+(o.i.height-o.li.height)/2+'px';
       this.load(o,o.a[n],src,n);
      }
      else if (o.a[n][0].width>40){             // if the preload image has loaded
       o.lk.removeAttribute('href');       // remove the image href
       o.ci[0].src=o.a[n][0].src;          // cnange the scc of the clobe image
       o.ci[0].style.width=o.i.width+'px';
       o.ci[0].style.height=o.i.height+'px';
       this.animate(o,o.ci,o.ci[1],100,new Date(),o.fi);  // fade the clone image in
       o.ci[0].style.left=p[0]+'px';                      // position the clone image ober the featered image
       o.ci[0].style.top=p[1]+'px';
       o.n=n;
      }
      else {
       o.a.splice(n,1);
       o.l--;
       o.auto?o.to=this.Auto(o.id,200):null;
      }
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     animate:function(o,a,f,t,srt,mS){
      clearTimeout(a[2]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[1]=n;
       oop.opc(a[0],n);
      }
      if (ms<mS){
       a[2]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       o.i.src=a[0].src;  // change the SRC of the featured image
       o.a[o.n][1]?o.lk.href=o.a[o.n][1]:null; // change the HHREF of the featured image link
       a[0].style.left=a[0].style.top='-3000px';  // hide the clone image
       a[1]=0;
       if (o.auto){
        oop.Auto(o.id,o.h);
       }
      }
     },
    
     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;
     }
    
    }
    
    zxcFadeSlideShowII.Init({
     ImageID:'billy', // the unique ID name of the image. (string)
     ImageArray:[    // an array defining the image SRCs and link HREFs. (array)
      ['http://www.billyjoeconor.com/freebies/cell-savers/images/samples/640X1136-samples/billy-joe-640X1136-sample.jpg'],
      ['http://www.billyjoeconor.com/freebies/cell-savers/images/samples/640X1136-samples/guitar-640X1136-sample.jpg'],
      ['http://www.billyjoeconor.com/freebies/cell-savers/images/samples/640X1136-samples/guitar-3-640X1136-sample.jpg'],
      ['http://www.billyjoeconor.com/freebies/cell-savers/images/samples/640X1136-samples/guitar-2-640X1136-sample.jpg']
     ],
     LoadingImage:'http://www.vicsjavascripts.org/StdImages/loading.gif',
     FadeIn:1000,      //(optional) the fade in duration in millseconds.         (number, default = 100)
    // AutoStart:2000,  //(optional) the auto rotate start delay in millseconds.  (number, default = no auto start)
     AutoHold:2000    //(optional) the auto rotate delay in millseconds.        (number, default = FadeIn*4)
    });
    /*]]>*/
    </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/

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

    KennyP (12-29-2014)

  4. #3
    Join Date
    Dec 2009
    Location
    NY NY USA
    Posts
    228
    Thanks
    158
    Thanked 1 Time in 1 Post

    Default

    Vic:

    Thank you so, so much for posting the script update. However, I must be doing something wrong entering it into the page. Sometimes the images fade in and sometimes they load abruptly. Also, the second, third and fourth images get stretched horizontally and I can't figure out what I did to cause this. If you can please manage a look, here's the second test page.

    Thanks,

    Kenny

    EDIT: I fixed the image dimensions and they no longer get stretched horizontally.

    Just noticed. If you move the cursor slowly from thumb to thumb, the fade works. If you move it faster, the fade doesn't work.

    Also, when you hover one thumb, sometimes another thumb vibrates.
    Last edited by KennyP; 12-29-2014 at 03:16 PM.

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

    Default

    I can not see a problem but I have made some changes to the script

    Code:
    <script type="text/javascript">
    /*<![CDATA[*/
    // Fade Slide Show II (07-11-2014)
    // by Vic Phillips - http://www.vicsjavascripts.org/
    
    
    var zxcFadeSlideShowII={
    
     GoTo:function(id,n){
      var o=this['zxc'+id];
      if (o){
       this.Pause(id);
       o.a[n]&&n!=o.n?this.rotate(o,n):null;
      }
     },
    
     Next:function(id,ud){
      var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
      if (o){
       this.Pause(o.id);
       o.ud=ud;
       this.rotate(o,o.n+ud);
      }
     },
    
     Auto:function(id,ms){
      var o=this['zxc'+id];
      if (o){
       o.to=setTimeout(function(){ o.auto=true; o.oop.rotate(o,true); },ms||200);
      }
     },
    
     Pause:function(id){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
       o.auto=false;
      }
     },
    
     Init:function(o){
      var id=o.ImageID,a=o.ImageArray,li=o.LoadingImage,fi=o.FadeIn,h=o.AutoHold,s=o.AutoStart,i=document.getElementById(id);
      if (i&&a instanceof Array){
       o.id=id;
       o.i=i;
       o.lk=i.parentNode;
       i=document.createElement('IMG');   // create a clone to overlay the image when the SRC is changes
       i.style.position='absolute';
       i.style.zIndex='101';
       i.style.left=i.style.top='-3000px';
       document.body.appendChild(i);
       o.ci=[i,0];
       o.li=i.cloneNode(false);
       o.li.src=li;
       typeof(li)=='string'?document.body.appendChild(o.li):null
       o.a=a;
       o.fi=typeof(fi)=='number'&&fi>0?fi:1000;
       o.h=typeof(h)=='number'&&h>0?h:o.fi*4;
       o.l=a.length-1;
       o.oop=this;
       o.n=0;
       o.ud=1;
       this['zxc'+id]=o;
       typeof(s)=='number'&&s>0?this.Auto(id,s):null;
      }
     },
    
     load:function(o,a,src,n){
      clearTimeout(o.to);
      if (src.width<40){
       return o.to=setTimeout(function(){ zxcFadeSlideShowII.load(o,a,src,n); },210);
      }
      o.li.style.top='-3000px';
      a[0]=src;
      this.rotate(o,n,true);
     },
    
     rotate:function(o,a,pl){
      var p=this.pos(o.i),n=o.n,src;
    //  o.auto=a===true||pl===true;
      n=o.auto?n+o.ud:a;    // establish the index bumber of the next image
      n=n>o.l?0:n<0?o.l:n;  // ensure the image array index is >= 0  and < the ayyay length
      if (typeof(o.a[n][0])=='string'){
       src=new Image()
       src.src=o.a[n][0];
       o.li.style.left=p[0]+(o.i.width-o.li.width)/2+'px'; // position the clone image ober the featered image
       o.li.style.top=p[1]+(o.i.height-o.li.height)/2+'px';
       this.load(o,o.a[n],src,n);
      }
      else if (o.a[n][0].width>40){             // if the preload image has loaded
       o.lk.removeAttribute('href');       // remove the image href
       this.opc(o.ci[0],0);
       o.ci[0].src=o.a[n][0].src;          // cnange the scc of the clobe image
       o.ci[0].style.width=o.i.width+'px';
       o.ci[0].style.height=o.i.height+'px';
       this.animate(o,o.ci,o.ci[1],100,new Date(),o.fi);  // fade the clone image in
       o.ci[0].style.left=p[0]+'px';                      // position the clone image ober the featered image
       o.ci[0].style.top=p[1]+'px';
       o.n=n;
      }
      else {
       o.a.splice(n,1);
       o.l--;
       o.auto?o.to=this.Auto(o.id,200):null;
      }
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     animate:function(o,a,f,t,srt,mS){
      clearTimeout(a[2]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[1]=n;
       oop.opc(a[0],n);
      }
      if (ms<mS){
       a[2]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       o.i.src=a[0].src;  // change the SRC of the featured image
       o.a[o.n][1]?o.lk.href=o.a[o.n][1]:null; // change the HHREF of the featured image link
       a[0].style.left=a[0].style.top='-3000px';  // hide the clone image
       a[1]=0;
       if (o.auto){
        oop.Auto(o.id,o.h);
       }
      }
     },
    
     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;
     }
    
    }
    
    zxcFadeSlideShowII.Init({
     ImageID:'billy', // the unique ID name of the image. (string)
     ImageArray:[    // an array defining the image SRCs and link HREFs. (array)
      ['http://www.billyjoeconor.com/freebies/cell-savers/images/samples/640X1136-samples/billy-joe-640X1136-sample.jpg'],
      ['http://www.billyjoeconor.com/freebies/cell-savers/images/samples/640X1136-samples/guitar-640X1136-sample.jpg'],
      ['http://www.billyjoeconor.com/freebies/cell-savers/images/samples/640X1136-samples/guitar-2-640X1136-sample.jpg'],
      ['http://www.billyjoeconor.com/freebies/cell-savers/images/samples/640X1136-samples/guitar-3-640X1136-sample.jpg']
     ],
     LoadingImage:'http://www.vicsjavascripts.org/StdImages/loading.gif',
     FadeIn:1000,      //(optional) the fade in duration in millseconds.         (number, default = 100)
    // AutoStart:2000,  //(optional) the auto rotate start delay in millseconds.  (number, default = no auto start)
     AutoHold:2000    //(optional) the auto rotate delay in millseconds.        (number, default = FadeIn*4)
    });

    If you have more problems you will need to change your HTML and use

    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>
    <style type="text/css">
    /*<![CDATA[*/
    #thumbs {
      position:relative;
    }
    
    #thumbs IMG{
     width:176px;height:220px;
    }
    
    #loadarea {
      position:relative;
    }
    
    #loadarea IMG{
      position:absolute;width:257px;height:457px;visibility:hidden;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    <div id="thumbs" >
    <img src="http://www.billyjoeconor.com/freebies/cell-savers/images/samples/176X220-samples/billy-joe-176X220-sample.jpg" onmouseover="zxcFadeSlideShowA.GoTo('loadarea',0);" />
    <img src="http://www.billyjoeconor.com/freebies/cell-savers/images/samples/640X1136-samples/guitar-640X1136-sample.jpg" onmouseover="zxcFadeSlideShowA.GoTo('loadarea',1);" />
    <img src="http://www.billyjoeconor.com/freebies/cell-savers/images/samples/640X1136-samples/guitar-3-640X1136-sample.jpg" onmouseover="zxcFadeSlideShowA.GoTo('loadarea',2);" />
    <img src="http://www.billyjoeconor.com/freebies/cell-savers/images/samples/640X1136-samples/guitar-2-640X1136-sample.jpg" onmouseover="zxcFadeSlideShowA.GoTo('loadarea',3);" />
    </div>
    <div  id="loadarea" style=" margin-top:20px; text-align:center;">
     <img src="http://www.billyjoeconor.com/freebies/cell-savers/images/samples/640X1136-samples/billy-joe-640X1136-sample.jpg">
     <img src="http://www.billyjoeconor.com/freebies/cell-savers/images/samples/640X1136-samples/guitar-640X1136-sample.jpg" />
     <img src="http://www.billyjoeconor.com/freebies/cell-savers/images/samples/640X1136-samples/guitar-3-640X1136-sample.jpg" />
     <img src="http://www.billyjoeconor.com/freebies/cell-savers/images/samples/640X1136-samples/guitar-2-640X1136-sample.jpg" />
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Fade Slide Show II (29-12-2014)
    // by Vic Phillips - http://www.vicsjavascripts.org/
    
    
    var zxcFadeSlideShowA={
    
     GoTo:function(id,n){
      var o=this['zxc'+id];
      if (o){
       this.Pause(id);
       o.a[n]&&n!=o.n?this.rotate(o,n):null;
      }
     },
    
     Next:function(id,ud){
      var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
      if (o){
       o.ud=ud;
       this.rotate(o,o.n+ud);
      }
     },
    
     Auto:function(id,ms){
      var o=this['zxc'+id];
      if (o){
       o.to=setTimeout(function(){ o.oop.rotate(o,true); },ms||200);
      }
     },
    
     Pause:function(id){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
       o.auto=false;
      }
     },
    
     Init:function(o){
      var id=o.ParentID,fi=o.FadeIn,h=o.AutoHold,s=o.AutoStart,p=document.getElementById(id),i=p?p.getElementsByTagName('IMG'):[],z0=0;
      if (p&&i[1]){
       o.a=[];
       for (;z0<i.length;z0++){
        o.a[z0]=[i[z0],z0!=0?0:100];
        this.opc(i[z0],'',z0!=0?0:100);
        i[z0].style.visibility=z0!=0?'hidden':'visible';
       }
       o.id=id;
       o.fi=typeof(fi)=='number'&&fi>0?fi:1000;
       o.h=typeof(h)=='number'&&h>0?h:o.fi*4;
       o.l=o.a.length-1;
       o.oop=this;
       o.n=0;
       o.ud=1;
       this['zxc'+id]=o;
       typeof(s)=='number'&&s>0?this.Auto(id,s):null;
      }
     },
    
     rotate:function(o,a){
      this.Pause(o.id);
      var p=this.pos(o.i),n=o.n,src;
      o.auto=a===true;
      n=o.auto?n+o.ud:a;    // establish the index bumber of the next image
      n=n>o.l?0:n<0?o.l:n;  // ensure the image array index is >= 0  and < the ayyay length
      this.animate(o,o.a[o.n],o.a[o.n][1],0,new Date(),o.fi*(o.a[o.n][1]+.5)/100);  // fade the image out
      o.a[n][0].style.visibility='visible';
      this.animate(o,o.a[n],o.a[n][1],100,new Date(),o.fi*(100-o.a[n][1]+.5)/100);  // fade the image out
      o.n=n;
     },
    
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     animate:function(o,a,f,t,srt,mS){
      clearTimeout(a[2]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[1]=n;
       oop.opc(a[0],n);
      }
      if (ms<mS){
       a[2]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
        t==0?a[0].style.visibility='hidden':null;
        o.auto&&t==100?oop.Auto(o.id,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;
     }
    
    }
    
    zxcFadeSlideShowA.Init({
     ParentID:'loadarea', // the unique ID name of the images parent DIV.        (string)
     FadeIn:1000,      //(optional) the fade in duration in millseconds.         (number, default = 100)
    // AutoStart:1000,  //(optional) the auto rotate start delay in millseconds.  (number, default = no auto start)
     AutoHold:2000    //(optional) the auto rotate delay in millseconds.        (number, default = FadeIn*4)
    });
    /*]]>*/
    </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. The Following User Says Thank You to vwphillips For This Useful Post:

    KennyP (12-30-2014)

  7. #5
    Join Date
    Dec 2009
    Location
    NY NY USA
    Posts
    228
    Thanks
    158
    Thanked 1 Time in 1 Post

    Default

    Thank you Vic.

    With the changes you made in the last script posted, the images fade in and out as they should, no matter how slow or fast you move the cursor from one thumb to another. However, on page load, nothing displays properly on the left until you hover the thumbs a few times. Also, some display issues have developed on the left, like the loading area shifting to the right; shown here on test page 3.

    With the changes you made in the script before the last change, the initial issue with the images not loading properly is fixed, but if you hover faster from thumb to thumb the fading in and out no longer works; shown here on test page 2.
    Last edited by KennyP; 12-30-2014 at 03:03 AM.

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

    Default

    the position of the loadarea images may be controlled by the CSS

    Code:
    #loadarea {
      position:relative;
    }
    
    #loadarea IMG{
      position:absolute;left:40px;top:40px;width:257px;height:457px;visibility:hidden;
    }
    the code I posted had an error at the line in red

    Code:
    // Fade Slide Show II (29-12-2014)
    // by Vic Phillips - http://www.vicsjavascripts.org/
    
    
    var zxcFadeSlideShowA={
    
     GoTo:function(id,n){
      var o=this['zxc'+id];
      if (o){
       this.Pause(id);
       o.a[n]&&n!=o.n?this.rotate(o,n):null;
      }
     },
    
     Next:function(id,ud){
      var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
      if (o){
       o.ud=ud;
       this.rotate(o,o.n+ud);
      }
     },
    
     Auto:function(id,ms){
      var o=this['zxc'+id];
      if (o){
       o.to=setTimeout(function(){ o.oop.rotate(o,true); },ms||200);
      }
     },
    
     Pause:function(id){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
       o.auto=false;
      }
     },
    
     Init:function(o){
      var id=o.ParentID,fi=o.FadeIn,h=o.AutoHold,s=o.AutoStart,p=document.getElementById(id),i=p?p.getElementsByTagName('IMG'):[],z0=0;
      if (p&&i[1]){
       o.a=[];
       for (;z0<i.length;z0++){
        o.a[z0]=[i[z0],z0!=0?0:100];
        this.opc(i[z0],z0!=0?50:100);
        i[z0].style.visibility=z0!=0?'hidden':'visible';
       }
       o.id=id;
       o.fi=typeof(fi)=='number'&&fi>0?fi:1000;
       o.h=typeof(h)=='number'&&h>0?h:o.fi*4;
       o.l=o.a.length-1;
       o.oop=this;
       o.n=0;
       o.ud=1;
       this['zxc'+id]=o;
       typeof(s)=='number'&&s>0?this.Auto(id,s):null;
      }
     },
    
     rotate:function(o,a){
      this.Pause(o.id);
      var p=this.pos(o.i),n=o.n,src;
      o.auto=a===true;
      n=o.auto?n+o.ud:a;    // establish the index bumber of the next image
      n=n>o.l?0:n<0?o.l:n;  // ensure the image array index is >= 0  and < the ayyay length
      this.animate(o,o.a[o.n],o.a[o.n][1],0,new Date(),o.fi*(o.a[o.n][1]+.5)/100);  // fade the image out
      o.a[n][0].style.visibility='visible';
      this.animate(o,o.a[n],o.a[n][1],100,new Date(),o.fi*(100-o.a[n][1]+.5)/100);  // fade the image out
      o.n=n;
     },
    
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     animate:function(o,a,f,t,srt,mS){
      clearTimeout(a[2]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[1]=n;
       oop.opc(a[0],n);
      }
      if (ms<mS){
       a[2]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
        t==0?a[0].style.visibility='hidden':null;
        o.auto&&t==100?oop.Auto(o.id,o.h):null;
      }
     },
    
     opc:function(o,n){
    document.Show.Show0.value+=n+'#';
    alert(n)
      o.style.filter='alpha(opacity='+n+')';
      o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
     }
    
    }
    
    zxcFadeSlideShowA.Init({
     ParentID:'loadarea', // the unique ID name of the images parent DIV.        (string)
     FadeIn:1000,      //(optional) the fade in duration in millseconds.         (number, default = 100)
    // AutoStart:1000,  //(optional) the auto rotate start delay in millseconds.  (number, default = no auto start)
     AutoHold:2000    //(optional) the auto rotate delay in millseconds.        (number, default = FadeIn*4)
    });
    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. The Following User Says Thank You to vwphillips For This Useful Post:

    KennyP (12-30-2014)

  10. #7
    Join Date
    Dec 2009
    Location
    NY NY USA
    Posts
    228
    Thanks
    158
    Thanked 1 Time in 1 Post

    Default

    Thanks Vic, but with the latest code nothing displays in the load area.

    Latest Version Here

    So far, the original version would be the best. In IE it's all perfect. Unfortunately In Firefox the images fade-in and fade out, and then they display the proper size.
    Can that issue be fixed in that version?

    Original Version Here
    Last edited by KennyP; 12-30-2014 at 12:35 PM.

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

    Default

    Sorry a typo had crept in

    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>
    <style type="text/css">
    /*<![CDATA[*/
    #loadarea {
     position:relative;border:solid red 1px;
    }
    
    #loadarea IMG{
     position:absolute;left:0px;top:0px;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    <div id="loadarea" style="width:257px; height:457px; margin-top:20px; text-align:center;">
     <img id="billy" src="http://www.billyjoeconor.com/freebies/cell-savers/images/samples/640X1136-samples/billy-joe-640X1136-sample.jpg" alt="Billy Joe Conor" name="Billy Joe Conor" width="257" height="457" style="text-align:center; vertical-align: middle; margin-top:1px; margin-bottom:9px;">
    
     <img src="http://www.billyjoeconor.com/freebies/cell-savers/images/samples/640X1136-samples/guitar-640X1136-sample.jpg"  alt="Billy Joe Conor" name="Billy Joe Conor" width="257" height="457" style="text-align:center; vertical-align: middle; margin-top:1px; margin-bottom:9px;">
    
     <img src="http://www.billyjoeconor.com/freebies/cell-savers/images/samples/640X1136-samples/guitar-3-640X1136-sample.jpg" alt="Billy Joe Conor" name="Billy Joe Conor" width="257" height="457" style="text-align:center; vertical-align: middle; margin-top:1px; margin-bottom:9px;">
    
     <img src="http://www.billyjoeconor.com/freebies/cell-savers/images/samples/640X1136-samples/guitar-2-640X1136-sample.jpg" alt="Billy Joe Conor" name="Billy Joe Conor" width="257" height="457" style="text-align:center; vertical-align: middle; margin-top:1px; margin-bottom:9px;">
    </div>
    
    <div style="margin-top:0px; height:100%; z-index:inherit !important;">
    
      <div id="thumbs" class="left" style="float:left;width:178px; height:222px; margin-top:0px; margin-right:0px; margin-left:51px;"><a
    href="generate20141216.php?which=billyjoe" class="highlightit">
    <img src="http://www.billyjoeconor.com/freebies/cell-savers/images/samples/176X220-samples/billy-joe-176X220-sample.jpg" onmouseover="zxcFadeSlideShowA.GoTo('loadarea',0);" /></a></div>
    
    <div id="thumbs" class="right" style="float:left;width:178px; height:222px; margin-top:0px; margin-right:51px; margin-left:0px;"><a
    href="generate20141216.php?which=guitar" class="highlightit">
    <img src="http://www.billyjoeconor.com/freebies/cell-savers/images/samples/176X220-samples/guitar-176X220-sample.jpg" onmouseover="zxcFadeSlideShowA.GoTo('loadarea',1);" /></a></div>
    
    <div id="thumbs" class="left" style="float:left;width:178px; height:222px; margin-top:20px; margin-right:0px; margin-left:51px;">
    <a href="generate20141216.php?which=guitar2" class="highlightit">
    <img src="http://www.billyjoeconor.com/freebies/cell-savers/images/samples/176X220-samples/guitar-2-176X220-sample.jpg" onmouseover="zxcFadeSlideShowA.GoTo('loadarea',2);" /></a></div>
    
    <div id="thumbs" class="right" style="float:left;width:178px; height:222px; margin-top:20px;  margin-right:51px; margin-left:0px;">
    <a href="generate20141216.php?which=guitar3" class="highlightit">
    <img src="http://www.billyjoeconor.com/freebies/cell-savers/images/samples/176X220-samples/guitar-3-176X220-sample.jpg" onmouseover="zxcFadeSlideShowA.GoTo('loadarea',3);" /></a></div>
    
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Fade Slide Show II (29-12-2014)
    // by Vic Phillips - http://www.vicsjavascripts.org/
    
    
    var zxcFadeSlideShowA={
    
     GoTo:function(id,n){
      var o=this['zxc'+id];
      if (o){
       this.Pause(id);
       o.a[n]&&n!=o.n?this.rotate(o,n):null;
      }
     },
    
     Next:function(id,ud){
      var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
      if (o){
       o.ud=ud;
       this.rotate(o,o.n+ud);
      }
     },
    
     Auto:function(id,ms){
      var o=this['zxc'+id];
      if (o){
       o.to=setTimeout(function(){ o.oop.rotate(o,true); },ms||200);
      }
     },
    
     Pause:function(id){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
       o.auto=false;
      }
     },
    
     Init:function(o){
      var id=o.ParentID,fi=o.FadeIn,h=o.AutoHold,s=o.AutoStart,p=document.getElementById(id),i=p?p.getElementsByTagName('IMG'):[],z0=0;
      if (p&&i[1]){
       o.a=[];
       for (;z0<i.length;z0++){
        o.a[z0]=[i[z0],z0!=0?0:100];
        this.opc(i[z0],z0!=0?50:100);
        i[z0].style.visibility=z0!=0?'hidden':'visible';
       }
       o.id=id;
       o.fi=typeof(fi)=='number'&&fi>0?fi:1000;
       o.h=typeof(h)=='number'&&h>0?h:o.fi*4;
       o.l=o.a.length-1;
       o.oop=this;
       o.n=0;
       o.ud=1;
       this['zxc'+id]=o;
       typeof(s)=='number'&&s>0?this.Auto(id,s):null;
      }
     },
    
     rotate:function(o,a){
      this.Pause(o.id);
      var p=this.pos(o.i),n=o.n,src;
      o.auto=a===true;
      n=o.auto?n+o.ud:a;    // establish the index bumber of the next image
      n=n>o.l?0:n<0?o.l:n;  // ensure the image array index is >= 0  and < the ayyay length
      this.animate(o,o.a[o.n],o.a[o.n][1],0,new Date(),o.fi*(o.a[o.n][1]+.5)/100);  // fade the image out
      o.a[n][0].style.visibility='visible';
      this.animate(o,o.a[n],o.a[n][1],100,new Date(),o.fi*(100-o.a[n][1]+.5)/100);  // fade the image out
      o.n=n;
     },
    
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     animate:function(o,a,f,t,srt,mS){
      clearTimeout(a[2]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[1]=n;
       oop.opc(a[0],n);
      }
      if (ms<mS){
       a[2]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
        t==0?a[0].style.visibility='hidden':null;
        o.auto&&t==100?oop.Auto(o.id,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;
     }
    
    }
    
    zxcFadeSlideShowA.Init({
     ParentID:'loadarea', // the unique ID name of the images parent DIV.        (string)
     FadeIn:1000,      //(optional) the fade in duration in millseconds.         (number, default = 100)
    // AutoStart:1000,  //(optional) the auto rotate start delay in millseconds.  (number, default = no auto start)
     AutoHold:2000    //(optional) the auto rotate delay in millseconds.        (number, default = FadeIn*4)
    });
    /*]]>*/
    </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/

  12. The Following User Says Thank You to vwphillips For This Useful Post:

    KennyP (12-30-2014)

  13. #9
    Join Date
    Dec 2009
    Location
    NY NY USA
    Posts
    228
    Thanks
    158
    Thanked 1 Time in 1 Post

    Default

    It's working just great Vic. Thank you!

    FYI - Quite accidentally I discovered that there really was nothing wrong with your original script.

    I added the images to preload on the splash/welcome page, and to my surprise the test page with
    the older script started displaying the images perfectly. Nevertheless, I'll continue using your new
    script as it's not dependent on having to preload the images separately.


    Here's the live page
    , linked to another page with a second set of images.

    Again thank you so much for your help.
    Last edited by KennyP; 12-31-2014 at 12:00 AM.

Similar Threads

  1. Fade in/out another image on hover
    By windbrand in forum JavaScript
    Replies: 0
    Last Post: 12-08-2011, 07:10 PM
  2. li hover with fade in
    By Lozu in forum HTML
    Replies: 3
    Last Post: 12-07-2010, 11:43 AM
  3. Code/Script on hover fade in
    By jkl47 in forum JavaScript
    Replies: 6
    Last Post: 08-30-2010, 09:46 PM
  4. Ultimate Fade In that work with thumbnails?
    By soren in forum Dynamic Drive scripts help
    Replies: 12
    Last Post: 10-04-2009, 09:37 AM
  5. Display larger image in Ultimate Fade-in Slideshow
    By neilbradford in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 08-31-2006, 04:51 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
  •