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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    adding fade-in effect to "javascriptkit" slideshow code

    hi, there i'm using this slideshow code found at "javascriptkit.com": http://www.javascriptkit.com/howto/show2.shtml

    this is the ONLY code i found to work on my website (i have tried several others with no luck).

    the only thing missing from the javascriptkit slideshow is the fade-in effect. i'm not a coder, so i'm proud of myself for figuring out how to add unlimited numbers of photos to this code; but i have no idea how to add fade-in code.

    any ideas?

    also, i don't mind if other slideshow codes are offered to me, but i really just want to stick to what i have found works and just be able to enhance it by adding the fade-in code (that way i don't waste my time any further).

    thanx! in advance for any help you may provide to me.

    --shereen--

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    that code cannot handle fade effect

    try this


    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[*/
    #Tst {
      position:relative;width:100px;height:100px;border:solid black 1px;
    }
    
    #Tst IMG {
      position:absolute;left:0px;top:0px;
    }
    
    
    
    /*]]>*/
    </style>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    // Basic Element Animator (04-October-2008) DRAFT
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
    
    // **** Application Notes
    
    // **** The HTML Code
    //
    // when moving an element the inline or class rule style position of the element should be assigned as
    // 'position:relative;' or 'position:absolute;'
    //
    // The element would normally be assigned a unique ID name.
    //
    
    // **** Executing the Effect(Script)
    //
    // The effect is executed by an event call to function 'zxcBAnimator('left','tst1',20,260,2000);'
    // where:
    // parameter 0 = the mode(see Note 1).                                                                     (string)
    // parameter 1 = the unique ID name or element object.                                                     (string or element object)
    // parameter 2 = the start position of the effect.                                                         (digits, for opacity minimum 0, maximum 100)
    // parameter 3 = the finish position of the effect.                                                        (digits, for opacity minimum 0, maximum 100)
    // parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds.     (digits or defaults to 2000 milliSeconds)
    //
    //  Note 1:  The default units(excepting opacity) are 'px'.
    //  Note 2:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
    //           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
    //  Note 3:  To 'toggle' the effect include '#' in parameter 0.
    //           The first call will set the toggle parameters.
    //           Subsequent calls with '#' in parameter 0 and the same start and finish parameters will 'toggle' the effect.
    //  Note 4:  The function may be re-executed with a different set of parameters (start/finish time or period)
    //           whenever required, say from an onclick/mouseover/out event.
    //           The period parameter will be retained unless re-specified.
    //
    // **** Advanced Applications
    //
    //  It may be required to access the current value of the effect.
    //  The element effect is accessible from the element property
    //  element effect = elementobject[mode.replace(/[-#]/g,'')+'oop'];
    //  where mode is parameter 0 of the initial call.
    //  An array storing the current, start and finish values of the element effect may be accessed
    //  from the element effect.data as fields 0, 1 and 2 respectively
    //
    
    // **** General
    //
    // All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
    // These characters may be changed to characters of choice using global find and replace.
    //
    // The Functional Code(about 2K) is best as an External JavaScript.
    //
    // Tested with IE7 and Mozilla FireFox on a PC.
    //
    
    
    
    // **** Functional Code - NO NEED to Change
    
    
    function zxcBAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
     if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
     if (!zxcobj||(!zxcsrt&&!zxcfin)||zxcsrt==zxcfin) return;
     var zxcoop=zxcobj[zxcmde.replace(/[-#]/g,'')+'oop'];
     if (zxcoop){
      clearTimeout(zxcoop.to);
      if (zxcoop.srtfin[0]==zxcsrt&&zxcoop.srtfin[1]==zxcfin&&zxcmde.match('#')) zxcoop.update([zxcoop.data[0],(zxcoop.srtfin[0]==zxcoop.data[2])?zxcfin:zxcsrt],zxctime);
      else zxcoop.update([zxcsrt,zxcfin],zxctime);
     }
     else zxcobj[zxcmde.replace(/[-#]/g,'')+'oop']=new zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime);
    }
    
    function zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
     this.srtfin=[zxcsrt,zxcfin];
     this.to=null;
     this.obj=zxcobj;
     this.mde=zxcmde.replace(/[-#]/g,'');
     this.update([zxcsrt,zxcfin],zxctime);
    }
    
    zxcBAnimatorOOP.prototype.update=function(zxcsrtfin,zxctime){
     this.time=zxctime||this.time||2000;
     this.data=[zxcsrtfin[0],zxcsrtfin[0],zxcsrtfin[1]];
     this.srttime=new Date().getTime();
     this.cng();
    }
    
    zxcBAnimatorOOP.prototype.cng=function(){
     var zxcms=new Date().getTime()-this.srttime;
     this.data[0]=(this.data[2]-this.data[1])/this.time*zxcms+this.data[1];
     if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
     if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
     else  this.opacity(this.data[0]);
     if (zxcms<this.time) this.to=setTimeout(function(zxcoop){return function(){zxcoop.cng();}}(this), 10);
     else {
      this.data[0]=this.data[2];
      if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
      else  this.opacity(this.data[0]);
     }
    }
    
    zxcBAnimatorOOP.prototype.opacity=function(zxcopc){
     if (zxcopc<0||zxcopc>100){ return; }
     this.obj.style.filter='alpha(opacity='+zxcopc+')';
     this.obj.style.opacity=this.obj.style.MozOpacity=this.obj.style.KhtmlOpacity=zxcopc/100-.001;
    }
    
    
    /*]]>*/
    </script>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    
    function zxcSlideShow(zxcid,zxcnu,zxchold,zxcspd){
     var zxcobj=document.getElementById(zxcid);
     zxcobj.hold=zxchold||zxcobj.hold;
     zxcobj.spd=zxcspd||zxcobj.zxcspd;
     if (!zxcobj.oop) zxcobj.oop=new zxcSlideShowOOP(zxcobj,zxcnu,zxchold,zxcspd);
     else {
      var zxcoop=zxcobj.oop;
      clearTimeout(zxcoop.to);
      if (typeof(zxcnu)=='number') zxcnu=zxcoop.max-zxcnu;
      if (zxcnu=='+'||zxcnu=='-'){
       if (zxcnu=='+') zxcnu=zxcoop.nu-1;
       else zxcnu=zxcoop.nu+1;
       zxcnu=Math.max(Math.min(zxcoop.max,zxcnu),0);
      }
      if (typeof(zxcnu)=='number') zxcoop.fade(zxcnu);
      else if (zxcnu.indexOf('auto')>-1) zxcoop.auto(zxcnu);
     }
    }
    
    function zxcSlideShowOOP(zxcobj,zxcnu,zxchold,zxcspd){
     this.obj=zxcobj;
     this.imgary=[];
     var zxcimgs=zxcobj.getElementsByTagName('IMG');
     this.nu=zxcnu;
     this.max=zxcimgs.length-1;
     this.nu=this.max-zxcnu;
     for (var zxc0=0;zxc0<this.max+1;zxc0++){
      zxcimgs[zxc0].fade=[zxc0!=this.nu?0:100,zxc0!=this.nu?100:0];
      zxcimgs[zxc0].style.zIndex=zxc0!=this.nu?0:1;
      zxcimgs[zxc0].style.visibility=zxc0!=this.nu?'hidden':'visible';
      this.imgary.push(zxcimgs[zxc0]);
     }
     this.lst=zxcimgs[this.nu];
     this.to=null;
    }
    
    zxcSlideShowOOP.prototype.fade=function(zxcnu){
     var zxcnxt=this.imgary[zxcnu];
     if (zxcnxt&&zxcnxt!=this.lst){
      this.nu=zxcnu;
      zxcBAnimator('opacity#',this.lst,this.lst.fade[0],this.lst.fade[1],1000);
      this.lst.style.zIndex=0;
      zxcBAnimator('opacity#',zxcnxt,zxcnxt.fade[0],zxcnxt.fade[1],this.obj.spd);
      zxcnxt.style.visibility='visible'
      zxcnxt.style.zIndex=1;
      this.lst=zxcnxt;
     }
    }
    
    zxcSlideShowOOP.prototype.auto=function(zxcmde){
     if (zxcmde.indexOf('-')>-1) zxcnu=this.nu+1;
     else zxcnu=zxcnu=this.nu-1;
     zxcnu=zxcnu<0?this.max:zxcnu>this.max?0:zxcnu;
     this.fade(zxcnu);
     this.to=setTimeout(function(zxcoop){return function(){zxcoop.auto(zxcmde);}}(this),this.obj.hold);
    }
    /*]]>*/
    </script>
    
    </head>
    
    <body onload="zxcSlideShow('Tst',0,2000,1000);">
    <input type="button" name="" value="Fwd" onclick="zxcSlideShow('Tst','+');" />
    <input type="button" name="" value="Back" onclick="zxcSlideShow('Tst','-');" />
    <input type="button" name="" value="Auto +" onclick="zxcSlideShow('Tst','auto+');" />
    <input type="button" name="" value="Stop" onclick="zxcSlideShow('Tst','stop');" />
    <input type="button" name="" value="Auto -" onclick="zxcSlideShow('Tst','auto-');" />
    <div id="Tst" >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" width="100" height="100" />
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="100" height="100" />
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="100" height="100" />
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="100" />
    </div>
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="20" height="20" onclick="zxcSlideShow('Tst',0);"/>
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="20" height="20" onclick="zxcSlideShow('Tst',1);"/>
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="20" height="20" onclick="zxcSlideShow('Tst',2);"/>
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" width="20" height="20" onclick="zxcSlideShow('Tst',3);"/>
    </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
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank you for your time, but your script did not work.

    this is what happened to it after i copied and pasted your ENTIRE COMPLETE script into my shopping cart webpage--the head and body tags went missing and the code got all garbled up at the end where the quotes were. the first image was visible on my screen, as well as the control buttons, but when i clicked on the "auto" button, nothing happened; and when i clicked on the "fwd" button, nothing happened (ie, no slideshow--just a static 1st image):


    Code:
    <style type="text/css">
    
    
    /*<![CDATA[*/
    #Tst {
      position:relative;width:100px;height:100px;border:solid black 1px;
    }
    
    #Tst IMG {
      position:absolute;left:0px;top:0px;
    }
    
    
    
    /*]]>*/</style><script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    // Basic Element Animator (04-October-2008) DRAFT
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
    
    // **** Application Notes
    
    // **** The HTML Code
    //
    // when moving an element the inline or class rule style position of the element should be assigned as
    // 'position:relative;' or 'position:absolute;'
    //
    // The element would normally be assigned a unique ID name.
    //
    
    // **** Executing the Effect(Script)
    //
    // The effect is executed by an event call to function 'zxcBAnimator('left','tst1',20,260,2000);'
    // where:
    // parameter 0 = the mode(see Note 1).                                                                     (string)
    // parameter 1 = the unique ID name or element object.                                                     (string or element object)
    // parameter 2 = the start position of the effect.                                                         (digits, for opacity minimum 0, maximum 100)
    // parameter 3 = the finish position of the effect.                                                        (digits, for opacity minimum 0, maximum 100)
    // parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds.     (digits or defaults to 2000 milliSeconds)
    //
    //  Note 1:  The default units(excepting opacity) are 'px'.
    //  Note 2:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
    //           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
    //  Note 3:  To 'toggle' the effect include '#' in parameter 0.
    //           The first call will set the toggle parameters.
    //           Subsequent calls with '#' in parameter 0 and the same start and finish parameters will 'toggle' the effect.
    //  Note 4:  The function may be re-executed with a different set of parameters (start/finish time or period)
    //           whenever required, say from an onclick/mouseover/out event.
    //           The period parameter will be retained unless re-specified.
    //
    // **** Advanced Applications
    //
    //  It may be required to access the current value of the effect.
    //  The element effect is accessible from the element property
    //  element effect = elementobject[mode.replace(/[-#]/g,'')+'oop'];
    //  where mode is parameter 0 of the initial call.
    //  An array storing the current, start and finish values of the element effect may be accessed
    //  from the element effect.data as fields 0, 1 and 2 respectively
    //
    
    // **** General
    //
    // All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
    // These characters may be changed to characters of choice using global find and replace.
    //
    // The Functional Code(about 2K) is best as an External JavaScript.
    //
    // Tested with IE7 and Mozilla FireFox on a PC.
    //
    
    
    
    // **** Functional Code - NO NEED to Change
    
    
    function zxcBAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
     if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
     if (!zxcobj||(!zxcsrt&&!zxcfin)||zxcsrt==zxcfin) return;
     var zxcoop=zxcobj[zxcmde.replace(/[-#]/g,'')+'oop'];
     if (zxcoop){
      clearTimeout(zxcoop.to);
      if (zxcoop.srtfin[0]==zxcsrt&&zxcoop.srtfin[1]==zxcfin&&zxcmde.match('#')) zxcoop.update([zxcoop.data[0],(zxcoop.srtfin[0]==zxcoop.data[2])?zxcfin:zxcsrt],zxctime);
      else zxcoop.update([zxcsrt,zxcfin],zxctime);
     }
     else zxcobj[zxcmde.replace(/[-#]/g,'')+'oop']=new zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime);
    }
    
    function zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
     this.srtfin=[zxcsrt,zxcfin];
     this.to=null;
     this.obj=zxcobj;
     this.mde=zxcmde.replace(/[-#]/g,'');
     this.update([zxcsrt,zxcfin],zxctime);
    }
    
    zxcBAnimatorOOP.prototype.update=function(zxcsrtfin,zxctime){
     this.time=zxctime||this.time||2000;
     this.data=[zxcsrtfin[0],zxcsrtfin[0],zxcsrtfin[1]];
     this.srttime=new Date().getTime();
     this.cng();
    }
    
    zxcBAnimatorOOP.prototype.cng=function(){
     var zxcms=new Date().getTime()-this.srttime;
     this.data[0]=(this.data[2]-this.data[1])/this.time*zxcms+this.data[1];
     if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
     if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
     else  this.opacity(this.data[0]);
     if (zxcms<this.time) this.to=setTimeout(function(zxcoop){return function(){zxcoop.cng();}}(this), 10);
     else {
      this.data[0]=this.data[2];
      if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
      else  this.opacity(this.data[0]);
     }
    }
    
    zxcBAnimatorOOP.prototype.opacity=function(zxcopc){
     if (zxcopc<0||zxcopc>100){ return; }
     this.obj.style.filter='alpha(opacity='+zxcopc+')';
     this.obj.style.opacity=this.obj.style.MozOpacity=this.obj.style.KhtmlOpacity=zxcopc/100-.001;
    }
    
    
    /*]]>*/
    </script><script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    
    function zxcSlideShow(zxcid,zxcnu,zxchold,zxcspd){
     var zxcobj=document.getElementById(zxcid);
     zxcobj.hold=zxchold||zxcobj.hold;
     zxcobj.spd=zxcspd||zxcobj.zxcspd;
     if (!zxcobj.oop) zxcobj.oop=new zxcSlideShowOOP(zxcobj,zxcnu,zxchold,zxcspd);
     else {
      var zxcoop=zxcobj.oop;
      clearTimeout(zxcoop.to);
      if (typeof(zxcnu)=='number') zxcnu=zxcoop.max-zxcnu;
      if (zxcnu=='+'||zxcnu=='-'){
       if (zxcnu=='+') zxcnu=zxcoop.nu-1;
       else zxcnu=zxcoop.nu+1;
       zxcnu=Math.max(Math.min(zxcoop.max,zxcnu),0);
      }
      if (typeof(zxcnu)=='number') zxcoop.fade(zxcnu);
      else if (zxcnu.indexOf('auto')>-1) zxcoop.auto(zxcnu);
     }
    }
    
    function zxcSlideShowOOP(zxcobj,zxcnu,zxchold,zxcspd){
     this.obj=zxcobj;
     this.imgary=[];
     var zxcimgs=zxcobj.getElementsByTagName('IMG');
     this.nu=zxcnu;
     this.max=zxcimgs.length-1;
     this.nu=this.max-zxcnu;
     for (var zxc0=0;zxc0<this.max+1;zxc0++){
      zxcimgs[zxc0].fade=[zxc0!=this.nu?0:100,zxc0!=this.nu?100:0];
      zxcimgs[zxc0].style.zIndex=zxc0!=this.nu?0:1;
      zxcimgs[zxc0].style.visibility=zxc0!=this.nu?'hidden':'visible';
      this.imgary.push(zxcimgs[zxc0]);
     }
     this.lst=zxcimgs[this.nu];
     this.to=null;
    }
    
    zxcSlideShowOOP.prototype.fade=function(zxcnu){
     var zxcnxt=this.imgary[zxcnu];
     if (zxcnxt&&zxcnxt!=this.lst){
      this.nu=zxcnu;
      zxcBAnimator('opacity#',this.lst,this.lst.fade[0],this.lst.fade[1],1000);
      this.lst.style.zIndex=0;
      zxcBAnimator('opacity#',zxcnxt,zxcnxt.fade[0],zxcnxt.fade[1],this.obj.spd);
      zxcnxt.style.visibility='visible'
      zxcnxt.style.zIndex=1;
      this.lst=zxcnxt;
     }
    }
    
    zxcSlideShowOOP.prototype.auto=function(zxcmde){
     if (zxcmde.indexOf('-')>-1) zxcnu=this.nu+1;
     else zxcnu=zxcnu=this.nu-1;
     zxcnu=zxcnu<0?this.max:zxcnu>this.max?0:zxcnu;
     this.fade(zxcnu);
     this.to=setTimeout(function(zxcoop){return function(){zxcoop.auto(zxcmde);}}(this),this.obj.hold);
    }
    /*]]>*/
    </script><input type="button" name="" onclick="zxcSlideShow(&amp;apos;#39;Tst&amp;apos;#39;,&amp;apos;#39;+&amp;apos;#39;);" value="Fwd" /> <input type="button" name="" onclick="zxcSlideShow(&amp;apos;#39;Tst&amp;apos;#39;,&amp;apos;#39;-&amp;apos;#39;);" value="Back" /> <input type="button" name="" onclick="zxcSlideShow(&amp;apos;#39;Tst&amp;apos;#39;,&amp;apos;#39;auto+&amp;apos;#39;);" value="Auto +" /> <input type="button" name="" onclick="zxcSlideShow(&amp;apos;#39;Tst&amp;apos;#39;,&amp;apos;#39;stop&amp;apos;#39;);" value="Stop" /> <input type="button" name="" onclick="zxcSlideShow(&amp;apos;#39;Tst&amp;apos;#39;,&amp;apos;#39;auto-&amp;apos;#39;);" value="Auto -" />
    <div id="Tst"><img height="100" alt="" width="100" src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" /> <img height="100" alt="" width="100" src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" /> <img height="100" alt="" width="100" src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" /> <img height="100" alt="" width="100" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" /> </div>
    <img height="20" alt="" width="20" onclick="zxcSlideShow(&amp;apos;#39;Tst&amp;apos;#39;,0);" src=" " /> <img height="20" alt="" width="20" onclick="zxcSlideShow(&amp;apos;#39;Tst&amp;apos;#39;,1);" src=" " /> <img height="20" alt="" width="20" onclick="zxcSlideShow(&amp;apos;#39;Tst&amp;apos;#39;,2);" src=" " /> <img height="20" alt="" width="20" onclick="zxcSlideShow(&amp;apos;#39;Tst&amp;apos;#39;,3);" src=" " />


  •  

    Posting Permissions

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