PDA

View Full Version : 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
<!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>