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 Coder
    Join Date
    Nov 2010
    Location
    Halifax - UK
    Posts
    22
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Question JS Slideshow/Gallery help

    Here is my code...

    Code:
    var slideshowFadeAnimate = new Array();
    var slideshowFadeTimer = new Array();
    var slideshowFadeCount = new Array();
    var slideshowFadeImages = new Array();
    
    
    //======================
    
    
    function slideshowFade(id,cl,imageArray,fadeInter…
    {
    
    if(cl)
    cl = ' class="'+cl+'"';
    
    document.write('<div id="'+id+'"'+cl+'><img id="'+id+'img" onload="slideshowFadeRun(\''+id+'\')"/><…
    
    var ss = document.getElementById(id+'img');
    if(ss.addEventListener)
    {
    ss.addEventListener('mouseover',function…
    ss.addEventListener('mouseout',function(…
    }
    else if(ss.attachEvent)
    {
    ss.attachEvent('onmouseover',function(){…
    ss.attachEvent('onmouseout',function(){s…
    }
    
    slideshowFadeCount[id] = 0;
    slideshowFadeImages[id] = imageArray;
    slideshowFadeAnimate[id] = 'run';
    slideshowFadeTimer[id] = setInterval('slideshowFadeAnimation(\''+…
    
    }
    
    
    //======================
    
    
    function slideshowFadeAnimation(id,holdTime)
    {
    if(slideshowFadeAnimate[id]=='run')
    {
    var obj = document.getElementById(id+'img');
    var opa = slideshowFadeCount[id]%200;
    
    if(opa==0)
    {
    slideshowFadeAnimate[id] = 'load';
    obj.src = slideshowFadeImages[id][Math.floor(slide…
    }
    else if(opa==100)
    {
    slideshowFadeAnimate[id] = 'hold';
    setTimeout('slideshowFadeRun(\''+id+'\')…
    }
    else if(opa>100)
    opa = 200-opa;
    
    obj.style.opacity = (opa/100).toString();
    obj.style.filter = "alpha(opacity="+opa.toString()+")";
    
    slideshowFadeCount[id]++;
    
    if(slideshowFadeCount[id]==(slideshowFad…
    slideshowFadeCount[id]=0;
    }
    }
    function slideshowFadeRun(id)
    {
    slideshowFadeAnimate[id] = 'run';
    }

    This works good however the image fades out totally and then new image fades in, can anyone tweak the code so one image fades into the next image.

    Thanks in advance.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,995
    Thanks
    79
    Thanked 4,433 Times in 4,398 Posts
    It's not a "tweak". It's rewrite. In order to fade one image into the next, you have to have *TWO* objects, one on top of the other, that are fading at the same time. That code isn't set up to do anything like that.

    It's set up to have multiple faders on the same page, but not at the same spot on the page.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    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:260px;height:200px;border:solid black 1px;
    }
    #tst IMG {
     width:100%;height:100%;
    
    }
    
    #tst1 {
      position:relative;width:260px;height:200px;border:solid black 1px;
    }
    #tst1 IMG {
     width:100%;height:100%;
    
    }
    
    /*]]>*/
    </style>
    
    </head>
    
    <body>
    <div id="tst">
     <img src="http://www.dynamicdrive.com/dynamicindex14/stadium.jpg" />
     <img src="http://www.dynamicdrive.com/dynamicindex14/winter.jpg" />
     <img src="http://www.dynamicdrive.com/dynamicindex14/duck.jpg" />
    </div>
    <input type="button" name="" value="Next" onclick="S1.Next(1);" />
    <input type="button" name="" value="Prev" onclick="S1.Next(-1);" />
    <input type="button" name="" value="Auto" onclick="S1.Auto();"/>
    <input type="button" name="" value="Pause" onclick="S1.Pause();"/>
    <input type="button" name="" value="GoTo 0" onclick="S1.GoTo(0);"/>
    <input type="button" name="" value="GoTo 1" onclick="S1.GoTo(1);"/>
    <input type="button" name="" value="GoTo 2" onclick="S1.GoTo(2);"/>
    <div id="tst1">
     <img src="http://www.dynamicdrive.com/dynamicindex14/stadium.jpg" />
     <img src="http://www.dynamicdrive.com/dynamicindex14/winter.jpg" />
     <img src="http://www.dynamicdrive.com/dynamicindex14/duck.jpg" />
    </div>
    <script type="text/javascript">
    /*<![CDATA[*/
    function zxcSS(o){
     var parent=document.getElementById(o.ID)                // the parent node of the images
     var imgs=parent.getElementsByTagName('IMG');            // the images in the parent node, the parent must be position 'relative' in the CSS
     this.ary=[];                                            // create a script instance array to store fade animator instances
     for (var z0=0;z0<imgs.length;z0++){                     // rotate through the images
      imgs[z0].style.position='absolute';                    // to allow the images to be placed on top of each other
      imgs[z0].style.zIndex=z0>0?'0':'1';                    // the first image is on top
      imgs[z0].style.left='0px';                             // all images have a position left of 0px
      imgs[z0].style.top='0px';                              // all images have a position top of 0px
      this.ary[z0]=new zxcFadeAnimator(imgs[z0],z0>0?0:100); // each field of this.ary contains a new instance for the fade animator with an image as its object
      this.ary[z0].opacity(z0>0?0:100);                      // set the opacity of the top image to 100 and the balance to 0
     }
     this.cnt=0;                                             // create a script instance counter this.cnt to 0
     this.lst=this.ary[0];                                   // create a script instance object referencing the top image
     this.ms=o.Duration||1000;                               // create a script instance recording the fade duration
     this.hold=o.Hold||this.ms*2;                            // create a script instance recording the automatic image change duration
    }
    
    zxcSS.prototype={
    
    // the instance 'GoTO' function
    // pass a number of the instance ary field to fade in that image
     GoTo:function(nu){
      clearTimeout(this.to);  // clear the timeout of the instance 'Auto' function
      if (this.ary[nu]){      // make sure the instance ary field exists
       this.cnt=nu;           // set the instance count to the number
       this.Next(0);          // call the instance 'NEXT' function passing 0 which will not increment the count
      }
     },
    
    // the instance 'Next' function
    // pass 1 or -1 to increment or decrement the intance count
     Next:function(ud){
      clearTimeout(this.to);                       // clear the timeout of the instance 'Auto' function
      this.lst.obj.style.zIndex='0';               // move the last image to the bottom
      this.lst.fade(this.lst.data[0],0,this.ms);   // fade out the last image
      this.cnt+=ud;                                // increment or decrement the intance count
      this.cnt=this.cnt<0?this.ary.length-1:this.cnt>=this.ary.length?0:this.cnt; // if the count is less than 0 set it to the maximum, if grater then the maximum set it to 0
      this.lst=this.ary[this.cnt];                 // change the instance lst to the new image
      this.lst.obj.style.zIndex='1';               // move the last image to the top
      this.lst.fade(this.lst.data[0],100,this.ms); // fade in the last image
     },
    
    // the instance 'Auto' function
    // to automatically change the images
     Auto:function(){
      clearTimeout(this.to); // clear the timeout of the instance 'Auto' function
      var oop=this;          // assign the instance to a local vaiable  to allow the setTimeout to function
      this.Next(1);          // call the instance 'Next' function  passing 1 to increment the count
      this.to=setTimeout(function(){ oop.Auto(); },this.hold+this.ms); // recall 'Auto' after the 'hold' plus 'fade' duration
     },
    
     Pause:function(){
      clearTimeout(this.to);
     }
    
    }
    
    
    // Opacity Fade Animator
    function zxcFadeAnimator(obj,srt){
     this.obj=obj;            // the instance object
     this.data=[srt];         // and array the current, start and finish value of opacity
     this.to=null;
    }
    
    zxcFadeAnimator.prototype={
    
    // instace function 'fade'
    // to start a fade in or fade out
    // parameter 0 = the fade start value.  (digits)
    // parameter 1 = the fade finish value. (digits)
    // parameter 0 = the fade duration.     (digits)
     fade:function(srt,fin,ms){
      clearTimeout(this.to);         // stop the instance setTimeout
      this.data=[srt,srt,fin];       // assign the current, start and finish value of opacity
      this.ms=ms*1;                  // the duration of the effect
      this.srt=new Date().getTime(); // the start time of the change
      this.change();                 // start the change
     },
    
    // instance function 'change'
    // to control the change of fade in or fade out
     change:function(){
      var oop=this;                                                      // assign the instance to a local vaiable  to allow the setTimeout to function
      var ms=new Date().getTime()-this.srt;                              // the current time minus the start time
      this.data[0]=(this.data[2]-this.data[1])/this.ms*ms+this.data[1];  // increment the current value dependent on the start and finish values and elapsed time
      this.opacity(this.data[0]);                                        // set the opacity to the current value
      if (ms<this.ms){                                                   // if the elapsed time is less than the 'fade duration' recall function opac
       this.to=setTimeout(function(){oop.change()},10);
      }
      else {
       this.data[0]=this.data[2];                                        // set the current value to the finish value
       this.opacity(this.data[0]);                                       // set the opacity to the current value(finish value)
      }
     },
    
    // instance function 'opacacity'
    // to control the change of fade in or fade out
     opacity:function(opc){
      opc=opc<0?0:opc>100?100:opc;
      var obj=this.obj;
      obj.style.filter='alpha(opacity='+opc+')';
      obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
     }
    
    
    }
    
    
    /*]]>*/
    </script>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    // generatate a new instance of the script.
    var S1=new zxcSS({
     ID:'tst',      // the unique ID name of the images parent node.                 (string)
     Duration:1000, // (optional) the duration of the fade effect in milliseconds.   (digits, default = 1000)
     Hold:2000      // (optional) the hold duration of automatic changing of images. (digits, default = Duration*2)
    });
    
    var S2=new zxcSS({
     ID:'tst1',      // the unique ID name of the images parent node.                 (string)
     Duration:500, // (optional) the duration of the fade effect in milliseconds.   (digits, default = 1000)
     Hold:2000      // (optional) the hold duration of automatic changing of images. (digits, default = Duration*2)
    });
    
    S2.Auto();
    
    /*]]>*/
    </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/

  • Users who have thanked vwphillips for this post:

    mat3000000 (11-24-2010)


  •  

    Posting Permissions

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