PDA

View Full Version : fade out possible?



zafra
08-23-2014, 07:57 PM
1) Ultimate Fade-in Slideshow v 2.6

2)http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.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.

zafra
08-24-2014, 04:26 PM
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/showthread.php?66456-Ultimate-Fade-In-Slideshow-transition-options&highlight=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/showthread.php?50079-Slideshow-fade-issues-using-transparent-pngs&highlight=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.

vwphillips
08-24-2014, 05:05 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[*/


.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>

zafra
08-24-2014, 09:02 PM
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.

james438
08-25-2014, 02:45 AM
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.

zafra
08-25-2014, 04:45 AM
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???

zafra
08-25-2014, 03:54 PM
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.