Results 1 to 7 of 7

Thread: fade out possible?

  1. #1
    Join Date
    Aug 2014
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question fade out possible?

    1) Ultimate Fade-in Slideshow v 2.6

    2)http://www.dynamicdrive.com/dynamici...nslideshow.htm

    Hi all, Id like to use the fade-in slideshow, but I want the image to fade in and then fade out before the next image fades in, so that you see the background image of the div show through for a moment between images. Is there a way to tweak the code to make this possible? Thanks in advance.

  2. #2
    Join Date
    Aug 2014
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Well miraculously I seem to have figured it out myself, using info gleaned from other posts on the forum. I used the code given by jscheuer1 in this discussion: http://www.dynamicdrive.com/forums/s...light=fade+out, adding the transparent gifs. But that still doesn't fade out the images, they were disappearing abruptly. So then I added the tweak from this discussion: http://www.dynamicdrive.com/forums/s...light=fade+out of modifying the foreground becomes background line with animate opacity. To make the fade out duration long enough to not look awkward (no number I put there seemed to have an effect for some reason), I found setting.fadeduration in the js file and stuck it in there and boom! fade out =fade in, which is what I wanted.

    Since I'm not a coder at ALL, the only annoying thing in the code now is that the black (I changed it to blank because it's fading to transparent, not black in my case) pause is affecting the actual images and the regular pause is affecting the blanks. That's irrelevant to what you see on the screen but it's an annoying inconsistency in the code. This is because the blankpause affects every other image starting with the first image in the array, and the regular pause affects every other image starting with the second in the array. I don't want a blank to be the first image because then there's a long wait for the slideshow to begin, so I had to put a real image first. I couldn't figure out how to reverse the affects of the pauses (again, me no coder ), so I just changed their durations so that the long pause is on the blank and the short on the regular pause. If anyone wants to chime in on how to clean up that bit of code I'd be thrilled. Also it would be nice to know if it's possible to fine tune the fade out duration if one didn't want it to match the fade in. Like I said I tried putting numbers in for duration and they had no effect.

    Anyway, I'm putting all this here in case someone some day wants to do what I wanted to do and has spent literally weeks trying programs (including pricey plugins and such) and codes and tutorials and what-all trying to do something that seems so DAMN SIMPLE. There is a way! Huzzah! And to think it was all possible via a free and very excellent program. The end.
    Last edited by zafra; 08-25-2014 at 04:41 AM. Reason: add some space btw paragraphs for readability.

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

    Default

    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[*/
    
    
    .slideshow {
      position:absolute;left:10px;top:10px;width:280px;height:210px;border:solid red 1px;background-Image:url(http://www.vicsjavascripts.org/StdImages/Cartoon1.gif);
    }
    
    .slideshow IMG{
      width:280px;height:210px;border-Width:0px;
    }
    
    .slideshow .caption {
     left:0px;width:100%;height:20px;background-Color:#FFFFCC;text-Align:center;font-Size:16px;
    /* Moz */
      opacity: .5;
    /* IE5-7 */
      filter: alpha(opacity=50);
    /* IE8 */
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    }
    
    .paginate {
     position:absolute;z-Index:4;left:300px;top:10px;width:20px;height:50px;
    }
    
    .paginate .default {
      width:15px;height:15px;background-Color:#FFFFCC;float:left;margin-Top:22px;border:solid #FF3300 1px;font-Size:12px;text-Align:center;cursor:pointer;
    }
    
    .paginate .active {
     background-Color:#FF0000;
    }
    
    .buttons {
      position:absolute;left:0px;top:225px;width:325px;text-Align:center;
    }
    
    .buttons INPUT {
      width:60px;background-Color:#FFCC66;font-Size:12px;
    }
    
    .buttons SELECT {
      width:250px;font-Size:12px;background-Color:#FFCC66;margin-Top:5px;
    }
    
    /*]]>*/
    </style>
    
    </head>
    
    <body>
      <div id="ex1" class="slideshow" >
       Loading Images
      </div>
    
      <div id="Page1" class="paginate"></div>
    
      <div class="buttons" >
       <input type="button" name="" value="Forward" onmouseup="zxcFadeSlideShow.Next('ex1',1);" />
       <input id="b1" type="button" name="" value="Back"  />
       <br />
       <input id="b4" type="button" name="" value="GoTo 0"  />
       <input id="b5" type="button" name="" value="GoTo 1" />
       <input type="button" name="" value="GoTo 2" onmouseup="zxcFadeSlideShow.GoTo('ex1',2);" />
       <br />
      </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Fade Slide Show (24-August-2014)
    // by Vic Phillips - http://www.vicsjavascripts.org/
    
    
    var zxcFadeSlideShow={
    
     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);
      }
     },
    
     GoTo:function(id,n){
      var o=this['zxc'+id];
      if (o){
       this.Pause(id);
       if (o.a[n]&&n!=o.n){
        o.ud=n>o.n?1:-1;
        this.rotate(o,n);
       }
      }
     },
    
     Auto:function(id,ms){
      var oop=this,o=oop['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;
      }
     },
    
     Init:function(o){
      var id=o.SlideShowID,a=o.ImageArray,s=o.PreLoad,p=document.getElementById(id);
      if (p&&a instanceof Array){
       for (var src,z0=0;z0<a.length;z0++){
        src=a[z0][0];
        a[z0][0]=new Image();
        a[z0][0].src=src;
       }
       o.id=id;
       o.p=p;
       this.load(o,a,new Date(),(typeof(s)=='number'&&s>0?s:10)*1000);
      }
     },
    
     load:function(o,a,d,s){
      clearTimeout(o.to);
      for (var oop=this,z0=0,z1=0;z0<a.length;z0++){
       if (a[z0][0].width<40&&new Date()-d<s){
        return o.to=setTimeout(function(){ oop.load(o,a,d,s); },200);
       }
      }
      for (;z1<a.length;z1++){
       if (a[z1][0].width<40){
        a.splice(z1--,1);
       }
      }
      o.p.innerHTML='';
      this.ready(o,a);
     },
    
     ready:function(o,d){
      var ms=o.Animate,h=o.AutoHold,s=o.AutoStart,days=o.Persistence,pg=document.getElementById(o.PaginateID),add=o.AddEvents,add=typeof(add)=='object'&&add.constructor==Array?add:[],i,t,c=pg?pg.childNodes:[],days=(typeof(days)=='number'&&days>0)||days=='session'?days:-1,ck=this.cookie(o.id),ck=this.cookie(o.id),n=days!=-1&&ck&&d[ck]?ck*1:0,z0=0,z1=0,z2=0;
      o.pg=[];
      for (;z0<c.length;z0++){
       if (c[z0].nodeType==1){
        o.pg.push(c[z0]);
       }
      }
      o.w=o.p.offsetWidth;
      o.h=o.p.offsetHeight;
      o.lk=document.createElement('A');
      o.p.appendChild(o.lk);
      o.a=[];
      o.c=[];
      for (;z1<d.length;z1++){
       i=document.createElement('IMG');
       o.lk.appendChild(i);
       i.src=d[z1][0].src;
       i.style.position='absolute';
       i.style.zIndex=z1!=n?'0':'2';
       i.style.visibility=z1!=n?'hidden':'visible';
       i.style.left=(o.w-i.width)/2+'px';
       i.style.top=(o.h-i.height)/2+'px';
       d[z1][0]=i;
       o.a[z1]=[i,'',z1,z1!=n?0:100];
       c=o.pg[z1]?o.pg[z1]:document.createElement('DIV');
       pg?pg.appendChild(c):null;
       d[z1][2]?c.innerHTML=d[z1][2]:null;
       c.className=c.className?c.className:'default';
       o.pg[z1]=[c,c.className];
       z1==n?c.className=o.pg[z0][1]+' active':null;
       this.addevt(c,'click','GoTo',o.id,z1);
       c=document.createElement('DIV');
       c.className='caption';
       c.style.position='absolute';
       c.style.zIndex='4';
       if (d[z1][3]){
        c.innerHTML=d[z1][3];
        o.p.appendChild(c);
       }
       o.c[z1]=[c,'top',c.offsetHeight,o.h-(z1!=n?0:c.offsetHeight)];
       c.style.top=o.c[z1][3]+'px';
      }
      for (;z2<add.length;z2++){
       i=document.getElementById(add[z2][0]),t=add[z2][1];
       if (i&&t&&this[add[z2][2]]){
        this.addevt(i,t=='mousemove'||t=='mousedown'||t=='mouseup'||t=='mouseover'||t=='mouseout'?t:'click',add[z2][2],o.id,add[z2][3]);
       }
      }
      d[n][1]?o.lk.href=d[n][1]:null;
      o.d=d;
      o.n=n
      o.days=days;
      o.l=z1-1;
      o.ud=1;
      o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
      o.hld=typeof(h)=='number'&&h>20?h:o.ms*4;
      o.cng=typeof(o.OnChange)=='function'?o.OnChange:null;
      o.p.style.overflow='hidden';
      o.cng?o.cng(o.n):null;
      this['zxc'+o.id]=o;
      typeof(s)=='number'&&s>20?this.Auto(o.id,s):null;
     },
    
     rotate:function(o,a){
      this.Pause(o.id);
      o.auto=a===true;
      var n=o.auto?o.n+o.ud:a;
      n=n<0?o.l:n>o.l?0:n;
      o.lk.removeAttribute('href');
      o.pg[o.n][0].className=o.pg[o.n][1];
      a=o.a[o.n];
      a[0].style.zIndex='1';
      this.animate(o,a,a[3],0,new Date(),o.ms,n);
      this.animate(o,o.c[o.n],o.c[o.n][3],o.h,new Date(),o.ms);
      o.a[n][0].style.left=(o.w-o.a[n][0].width)/2+'px';
      o.a[n][0].style.top=(o.h-o.a[n][0].height)/2+'px';
      document.cookie=o.id+'='+n+(typeof(o.days)=='number'?';expires='+(new Date(new Date().getTime()+o.days*86400000).toGMTString())+';path=/;':';');
      o.n=n;
      o.cng?o.cng(o.n):null;
     },
    
     animate:function(o,a,f,t,srt,mS,x){
      clearTimeout(a[4]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[3]=Math.max(0,n);
       a[1]?a[0].style[a[1]]=a[3]+'px':oop.opc(a[0],a[3]);
      }
      if (ms<mS){
       a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,x); },10);
      }
      else {
       a[3]=t;
       a[1]?a[0].style[a[1]]=t+'px':oop.opc(a[0],t);
       if (t==0){
        a[0].style.visibility='hidden';
        a[0].style.zIndex='0';
       }
       if (x==o.n){
        if (t==0){
         o.d[x][1]?o.lk.href=o.d[x][1]:null;
         a=o.a[o.n];
         a[0].style.visibility='visible';
         a[0].style.zIndex='2';
         o.pg[x][0].className=o.pg[x][1]+' active';
         this.animate(o,o.c[o.n],o.c[o.n][3],o.h-o.c[o.n][2],new Date(),o.ms);
         this.animate(o,a,a[3],100,new Date(),o.ms,x);
        }
        else if (t==100&&o.auto){
         oop.Auto(o.id,o.hld);
        }
       }
      }
     },
    
     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;
     },
    
     cookie:function(nme){
      var re=new RegExp(nme+'=[^;]+','i');
      return document.cookie.match(re)?document.cookie.match(re)[0].split("=")[1]:null;
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
     }
    
    
    }
    
    zxcFadeSlideShow.Init({
     SlideShowID:'ex1',    // the unique ID name of the slideshow parent DIV.                             (string)
     ImageArray:[          // an array defining the image data.                                           (array)
      // field 0 = the image SRC
      // field 1 = the image link HREF
      // field 2 = the innerHTML of the pagination element
      // field 3 = the innerHTML of slide in cpation element
      ['http://www.vicsjavascripts.org/StdImages/Egypt5.jpg','','1','Caption 1'],
      ['http://www.vicsjavascripts.org/StdImages/Egypt6.jpg','','2','Caption 2'],
      ['http://www.vicsjavascripts.org/StdImages/Egypt7.jpg','','3','Caption 3']
     ],
     PreLoad:10,           //(optional) the number of seconds allowed for image preload.                  (number, default = 10)
     Animate:1000,         //(optional) the effect duration in milli seconds.                             (number, default = 1000)
     AutoHold:3000,        //(optional) the auto rotate hold duration in milli seconds.                   (number, default = EffectDurarion*2)
     AutoStart:3000,       //(optional) true = start auto rotate on initilization.                        (boolean, default = true)
     AddEvents:[           //(optional) an array of arrays defining the events to be added.               (array, default = inline event calls)
     //   where each field is an array:
     //    field 0 = the unique ID name of the element.     (string)
     //    field 1 = the event type.                        (string)
     //    field 2 = the function name.                     (string)
     //    field 3 = the parameter to pass to the function. (see Script Functions)
      ['ex1','mouseout','Auto'],
      ['ex1','mouseover','Pause'],
      ['b1','mouseup','Next',-1],
      ['b4','mouseup','GoTo',0],
      ['b5','mouseup','GoTo',1]
     ],
     PaginateID:'Page1',   // the unique ID name of the parent node containing the paginate DIV elements. (string)
     Persistence:1,        //(optional) the number of days to restore the last display.                   (number, default = -1 = no persistence)
                           //(optional) 'session' = restore the last display for the browser session.     (number, default = -1 days = no persistence)
     OnChange:function(n){ //(optional) the function to call when the images are rotated.                 (function, default = no function call)
      // n = the index number of the current image.
     }
    })
    /*]]>*/
    </script>
    </body>
    
    </html>
    Last edited by vwphillips; 08-24-2014 at 08:25 PM.
    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/

  4. #4
    Join Date
    Aug 2014
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hmm. Thanks Vic but that's a whole lotta code and I don't have the foggiest idea what to do with it. Meanwhile I'd posted about having found the solution myself pretty much, but my comment seems to be awaiting moderation. BUT now I've tried adding more images to the array and although it works perfectly from the local files it's gone all wonky online. Why would it work with 4 images and not with more? I've searched the code for some clue but to no avail - now I need a pro to help I think. You can see what's going on here: http://nerudadoc.com/experiments/index.html. Thanks in advance.

  5. #5
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    2,181
    Thanks
    96
    Thanked 99 Times in 97 Posts

    Default

    I approved your earlier post Zafra. It was accidentally caught as potential spam. Feel free to leave it in place or delete it as you see fit although you may want to break it apart into smaller paragraphs for readability. Either way is fine though.
    Last edited by james438; 08-25-2014 at 02:56 AM.
    To choose the lesser of two evils is still to choose evil. My personal site

  6. #6
    Join Date
    Aug 2014
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks James!
    Well the most recent in the saga is that, totally randomly, sometimes an image flickers on right after having faded out, right before the next one starts to appear. This is happening on all browsers from what I've seen (I actually haven't even checked IE which is probably even worse!). Sometimes it happens on more than one image in a row, sometimes on just one, sometimes on none. I see no pattern whatsoever. I might post this as a separate issue actually because it kind of is one, but since it seems to be directly related to the tweak I did it seems relevant here as well. Any ideas anyone???

  7. #7
    Join Date
    Aug 2014
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Well this seems to be my self-help thread here, but when I'm looking for info online (how I've solved all my problems so far) I just hate finding threads where people ask questions, don't get a response, and then never post again as to whether they resolved their problem, so I'll post here that I seem to have solved the image flicker by changing opacity 0 to .01. Still looks transparent but the browsers like it better - such fusspots they are. Hopefully this ends the slideshow fade out issues drama.

Similar Threads

  1. Ultimate Fade-in slideshow (v2.4) - fade description text
    By kwakker35 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 02-06-2012, 04:13 PM
  2. Replies: 3
    Last Post: 07-12-2010, 04:04 PM
  3. Replies: 3
    Last Post: 04-26-2010, 04:51 PM
  4. Ultimate Fade in Slideshow - how to require FIRST image to fade in?
    By charmedworks in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 06-17-2008, 07:12 PM
  5. Ultimate Fade-in slideshow in Safari doesn't fade
    By dab in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 02-15-2007, 01:30 PM

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
  •