...

View Full Version : Adding dissolve/fade effect to slideshow



crocksox
06-27-2012, 02:42 PM
I have this bit of code that works perfectly fine, but would like to add an effect to dissolve the slide into the next. Can anyone offer any help? Thanks in advance.



<script language="JavaScript">
function RotateImages(Start)
{ var a = new Array("//___.jpg","//___.jpg","//___.jpg");
var c = new Array("", "//___.aspx", "");
var b = document.getElementById('Rotating1');
var d = document.getElementById('imageurl');
if(Start>=a.length) Start=0; b.src = a[Start];
d.href = c[Start];
window.setTimeout("RotateImages(" + (Start+1) + ")",6000); }
RotateImages(0); </script>

crocksox
06-27-2012, 06:50 PM
Can I give any more information? Am I missing some code? Anyone that can offer any help, please let me know! I appreciate it!

Philip M
06-27-2012, 06:54 PM
Have a look at the excellent scripts at

http://www.vicsjavascripts.org.uk/

especially e.g.


http://www.vicsjavascripts.org.uk/MultiFadeSlideShow/MultiFadeSlideShow.htm

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

crocksox
06-27-2012, 07:49 PM
Thank you Philip. Maybe I should have said more - The issue is that we hired a third party to give our website a facelift and now it has been put into my hands to maintain. I'm not the best web design guy, but I have a basic understanding and can figure most things out with time. I'm afraid that taking out their code will break it or change what my company likes about it. They want it just the same, except with nicer transitions between the images on the slideshow. Can anyone figure out something using this code as the basis? I would very much appreciate it.

crocksox
08-02-2012, 10:27 PM
My website is close to launch. Does anyone else have any advice on how to add to the existing code to add a fade transition to my slideshow array?

vwphillips
08-03-2012, 04:54 PM
the code you posted is unsuitable for modeification

with this there is no need to modify the HTML


<!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>
</head>

<body>

<input type="button" name="" value="GoTo 0" onmouseup="zxcFade.GoTo('tst',0);" />
<input type="button" name="" value="GoTo 1" onmouseup="zxcFade.GoTo('tst',1);" />
<input type="button" name="" value="GoTo 2" onmouseup="zxcFade.GoTo('tst',2);" />
<input type="button" name="" value="GoTo 3" onmouseup="zxcFade.GoTo('tst',3);" />
<br />
<br />
<a href="URL1.htm"><img id="tst" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" width="200" height="150" border="0"
onmouseover="zxcFade.Pause('tst');"
onmouseout="zxcFade.Auto('tst');"
/></a>
<br />
<img id="tst2" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" width="200" height="150" border="0" />


<script type="text/javascript">
/*<![CDATA[*/
// Simple Fade Slide Show (03-August-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/

var zxcFade={

init:function(o){
var oop=this,id=o.ImageID,img=document.getElementById(id),ary=o.ImageArray,ms=o.FadeDuration,hold=o.Hold Duration,ms=typeof(ms)=='number'?ms:1000,clone=document.createElement('IMG'),src,z0=0;
for (;z0<ary.length;z0++){
src=ary[z0][0];
ary[z0][0]=new Image();
ary[z0][0].src=src;
}
clone.style.position='absolute';
clone.style.zIndex='1001';
clone.style.left='-3000px';
clone.style.top='-3000px';
document.body.appendChild(clone);
this['zxc'+id]={
id:id,
ary:o.ImageArray,
clone:clone,
img:img,
a:img.parentNode,
ms:ms,
hold:typeof(hold)=='number'?hold:ms*4,
cnt:0
}
clone.onmouseover=function(){ oop.Pause(id); }
clone.onmouseout=function(){ oop.Auto(id); }
this.Auto(id,o.hold);
},

Auto:function(id,ms){
var o=this['zxc'+id],oop=this;
if (o){
o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200);
}
},

Pause:function(id){
var o=this['zxc'+id];
if (o){
o.auto=false;
clearTimeout(o.to);
}
},

GoTo:function(id,nu){
var o=this['zxc'+id];
if (o){
this.Pause(o.id);
if (o.ary[nu]&&nu!=o.cnt){
o.cnt=nu;
this.rotate(o,false);
}
}
},

rotate:function(o,auto){
var xy=this.pos(o.img);
this.Pause(o.id);
o.auto=auto===true;
if (o.auto){
o.cnt=++o.cnt%o.ary.length;
}
if (o.ary[o.cnt][0].width>40){
clearTimeout(o.dly);
this.animate(o,0,100,new Date(),o.ms);
o.clone.src=o.ary[o.cnt][0].src;
o.clone.style.left=xy[0]+'px';
o.clone.style.top=xy[1]+'px';
o.clone.style.width=o.img.width+'px';
o.clone.style.height=o.img.height+'px';
o.a.removeAttribute('href');
if (o.ary[o.cnt][1]){
o.a.href=o.ary[o.cnt][1];
}
}
else {
this.Auto(o.id,100);
}
},

animate:function(o,f,t,srt,mS){
var oop=this,obj=o.clone,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
obj.style.filter='alpha(opacity='+now+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
}
if (ms<mS){
o.dly=setTimeout(function(){ oop.animate(o,f,t,srt,mS); },10);
}
else {
o.img.src=obj.src;
obj.style.left='-3000px';
if (o.auto){
this.Auto(o.id,o.hold);
}
}
},

pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
}
}

zxcFade.init({
ImageID:'tst', // the unique ID name of the image. (string)
ImageArray:[ // an array defining the slide show images and link hrefs. (array)
// field 0 = the image src. (string)
// field 1 = (optional) the image link href. (string,default = no link href)
['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg','URL1.htm'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','URL2.htm'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','URL3.htm'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg','URL4.htm']
],
FadeDuration:500, //(optional) the fade duration im illi seconds. (number), default = 1000)
HoldDuration:2000 //(optional) the auto rotate hold duration im illi seconds. (number), default = 1000)
});

zxcFade.init({
ImageID:'tst2', // the unique ID name of the image. (string)
ImageArray:[ // an array defining the slide show images and link hrefs. (array)
['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg']
]
});



/*]]>*/
</script>
</body>

</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum