How to get FadeOut in Fade Slide Show

**asdfjklmichael** · 12-28-2014, 02:38 AM

Nevermind, I figured it out myself!

**vwphillips** · 12-29-2014, 01:35 PM

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>

Thread: How to get FadeOut in Fade Slide Show

Thread Tools

Search Thread

How to get FadeOut in Fade Slide Show

Similar Threads

Set Slide Duration for Ultimate Fade-In Slide Show Ver. 1.51

Ultimate Fade-In Slide Show - Audio file with each slide

Ultimate Fade-In Slide Show - Advance slide on mouse click

Ultimate Fade-in slide show- show text descriptions?

Ultimate Fade-In slide show slide limit

Bookmarks

Bookmarks

Posting Permissions