Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Adding dissolve/fade effect to slideshow

    I have this bit of code that works perfectly fine, but would like to add an effect to dissolve the slide into the next. Can anyone offer any help? Thanks in advance.

    Code:
    <script language="JavaScript">
    function RotateImages(Start)
    { var a = new Array("//___.jpg","//___.jpg","//___.jpg");
    var c = new Array("", "//___.aspx", "");
    var b = document.getElementById('Rotating1');
    var d = document.getElementById('imageurl');
    if(Start>=a.length) Start=0; b.src = a[Start];
    d.href = c[Start];
    window.setTimeout("RotateImages(" + (Start+1) + ")",6000); }
    RotateImages(0); </script>

  • #2
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Can I give any more information? Am I missing some code? Anyone that can offer any help, please let me know! I appreciate it!

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,173
    Thanks
    203
    Thanked 2,549 Times in 2,527 Posts
    Have a look at the excellent scripts at

    http://www.vicsjavascripts.org.uk/

    especially e.g.


    http://www.vicsjavascripts.org.uk/Mu...eSlideShow.htm

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; 06-27-2012 at 06:56 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #4
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you Philip. Maybe I should have said more - The issue is that we hired a third party to give our website a facelift and now it has been put into my hands to maintain. I'm not the best web design guy, but I have a basic understanding and can figure most things out with time. I'm afraid that taking out their code will break it or change what my company likes about it. They want it just the same, except with nicer transitions between the images on the slideshow. Can anyone figure out something using this code as the basis? I would very much appreciate it.

  • #5
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    My website is close to launch. Does anyone else have any advice on how to add to the existing code to add a fade transition to my slideshow array?

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,524
    Thanks
    3
    Thanked 508 Times in 495 Posts
    the code you posted is unsuitable for modeification

    with this there is no need to modify the HTML

    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>
    </head>
    
    <body>
    
    <input type="button" name="" value="GoTo 0" onmouseup="zxcFade.GoTo('tst',0);" />
    <input type="button" name="" value="GoTo 1" onmouseup="zxcFade.GoTo('tst',1);" />
    <input type="button" name="" value="GoTo 2" onmouseup="zxcFade.GoTo('tst',2);" />
    <input type="button" name="" value="GoTo 3" onmouseup="zxcFade.GoTo('tst',3);" />
    <br />
    <br />
    <a href="URL1.htm"><img id="tst" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" width="200" height="150" border="0"
    onmouseover="zxcFade.Pause('tst');"
    onmouseout="zxcFade.Auto('tst');"
     /></a>
     <br />
    <img id="tst2" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" width="200" height="150" border="0"  />
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Simple Fade Slide Show (03-August-2012)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    var zxcFade={
    
     init:function(o){
      var oop=this,id=o.ImageID,img=document.getElementById(id),ary=o.ImageArray,ms=o.FadeDuration,hold=o.HoldDuration,ms=typeof(ms)=='number'?ms:1000,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='1001';
      clone.style.left='-3000px';
      clone.style.top='-3000px';
      document.body.appendChild(clone);
      this['zxc'+id]={
      id:id,
       ary:o.ImageArray,
       clone:clone,
       img:img,
       a:img.parentNode,
       ms:ms,
       hold:typeof(hold)=='number'?hold:ms*4,
       cnt:0
      }
      clone.onmouseover=function(){ oop.Pause(id); }
      clone.onmouseout=function(){ oop.Auto(id); }
      this.Auto(id,o.hold);
     },
    
     Auto:function(id,ms){
      var o=this['zxc'+id],oop=this;
      if (o){
       o.to=setTimeout(function(){  oop.rotate(o,true); },ms||200);
      }
     },
    
     Pause:function(id){
      var o=this['zxc'+id];
      if (o){
       o.auto=false;
       clearTimeout(o.to);
      }
     },
    
     GoTo:function(id,nu){
      var o=this['zxc'+id];
      if (o){
       this.Pause(o.id);
       if (o.ary[nu]&&nu!=o.cnt){
        o.cnt=nu;
        this.rotate(o,false);
       }
      }
     },
    
     rotate:function(o,auto){
      var xy=this.pos(o.img);
      this.Pause(o.id);
      o.auto=auto===true;
      if (o.auto){
       o.cnt=++o.cnt%o.ary.length;
      }
      if (o.ary[o.cnt][0].width>40){
       clearTimeout(o.dly);
       this.animate(o,0,100,new Date(),o.ms);
       o.clone.src=o.ary[o.cnt][0].src;
       o.clone.style.left=xy[0]+'px';
       o.clone.style.top=xy[1]+'px';
       o.clone.style.width=o.img.width+'px';
       o.clone.style.height=o.img.height+'px';
       o.a.removeAttribute('href');
       if (o.ary[o.cnt][1]){
        o.a.href=o.ary[o.cnt][1];
       }
      }
      else {
       this.Auto(o.id,100);
      }
     },
    
     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){
        this.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;
     }
    }
    
    zxcFade.init({
     ImageID:'tst',     // the unique ID name of the image.                         (string)
     ImageArray:[       // an array defining the slide show images and link hrefs.  (array)
      // field 0 = the image src.                  (string)
      // field 1 = (optional) the image link href. (string,default = no link href)
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg','URL1.htm'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','URL2.htm'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','URL3.htm'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg','URL4.htm']
     ],
     FadeDuration:500, //(optional) the fade duration im illi seconds.              (number), default = 1000)
     HoldDuration:2000  //(optional) the auto rotate hold duration im illi seconds. (number), default = 1000)
    });
    
    zxcFade.init({
     ImageID:'tst2',     // the unique ID name of the image.                         (string)
     ImageArray:[       // an array defining the slide show images and link hrefs.  (array)
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg']
     ]
    });
    
    
    
    /*]]>*/
    </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/


  •  

    Posting Permissions

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