PDA

View Full Version : Gradual Element fader for multiple images



tbuck
11-05-2009, 09:17 PM
I am a newbie with html and javascript. I have used the gradual fader script successfully on a page - pretty much the way it was designed. Thanks.

But now I want to know if it can be modified such that doing a mouseover of one image on a page will cause the gradual fader effect on several separate images on the same page.

davelf
11-06-2009, 01:56 AM
sorry don't really understand what did you mean?

May be like this one:

http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm


good luck.:)

vwphillips
11-06-2009, 09:09 AM
<!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>
<script type="text/javascript">
// Animate (01-October-2009)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
//
// The element would normally be assigned a unique ID name.
//

// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimate('left','id1')
// where:
// A = a global variable (variable)
// parameter 0 = the mode(see Note 1). (string)
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 1 = the initial value. (digits, default = 0)

// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.update([10,800],5000,[10,800]);'
// where:
// A = the global referencing the script instance. (variable)
// parameter 1 = an array defining the start and finish values of the effect. (array)
// field 0 the start value. (digits, for opacity minimum 0, maximum 100)
// field 1 the finish value. (digits, for opacity minimum 0, maximum 100)
// parameter 2 = period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
// parameter 3 = (optional) to scale the effect time on a specified minimum/maximum. (array, see Note 3)
// field 0 the minimum value. (digits)
// field 1 the maximum value. (digits)
// parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'. (string, default = 'liner')
// 'sin' progression starts fast and ends slow.
// 'cos' progression starts slow and ends fast.
//
// Note 1: Examples modes: 'left', 'top', 'width', 'height', 'opacity.
// Note 2: The default units(excepting opacity) are 'px'.
// For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
// Note 3: The scale is of particular use when re-calling the effect
// in mid progression to retain an constant rate of progression.
// Note 4: The current effect value is recorded in A.data[0].
// Note 5: A function may be called on completion of the effect by assigning the function
// to the animator intance property .Complete.
// e.g. [instance].Complete=function(){ alert(this.data[0]); };
//



// **** Functional Code(1.58K) - NO NEED to Change

function zxcAnimate(mde,obj,fin){
this.to=null;
this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
this.mde=mde.replace(/\W/g,'');
this.data=[fin||0];
return this;
}

zxcAnimate.prototype.update=function(srtfin,ms,scale,c){
clearTimeout(this.to);
this.time=ms||this.time||0;
this.data=[srtfin[0],srtfin[0],srtfin[1]];
this.mS=this.time*(!scale?1:Math.abs((srtfin[1]-srtfin[0])/(scale[1]-scale[0])));
this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
this.inc=Math.PI/(2*this.mS);
this.srttime=new Date().getTime();
this.cng();
}

zxcAnimate.prototype.cng=function(){
var oop=this,ms=new Date().getTime()-this.srttime;
this.data[0]=(this.c=='s')?Math.floor((this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]):(this.c=='c')?(this.data[2])-Math.floor((this.data[2]-this.data[1])*Math.cos(this.inc*ms)):(this.data[2]-this.data[1])/this.mS*ms+this.data[1];
this.apply();
if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
else {
this.data[0]=this.data[2];
this.apply();
if (this.Complete) this.Complete(this);
}
}

zxcAnimate.prototype.apply=function(){
if (isFinite(this.data[0])){
if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
else zxcOpacity(this.obj,this.data[0]);
}
}

function zxcOpacity(obj,opc){
if (opc<0||opc>100) return;
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}


</script>

<script type="text/javascript">
/*<![CDATA[*/
function MultiFade(id,cls,from,to,ms){
var obj=document.getElementById(id);
var fade=zxcByClassName(cls);
this.ary=[];
for (var z0=0;z0<fade.length;z0++){
this.ary[z0]=new zxcAnimate('opacity',fade[z0],from);
zxcOpacity(fade[z0],from);
}
this.from=from||100;
this.to=to||100;
this.ms=ms||1000;
this.addevt(obj,'mouseover','Fade',true);
this.addevt(obj,'mouseout','Fade',false);
}

MultiFade.prototype.Fade=function(e,ud){
for (var z0=0;z0<this.ary.length;z0++){
this.ary[z0].update([this.ary[z0].data[0],ud?this.to:this.from],this.ms);
}
}

MultiFade.prototype.addevt=function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
else {
var prev=o['on'+t];
if (prev) o['on'+t]=function(e){ prev(e); oop[f](e,p); };
else o['on'+t]=o[f];
}
}

function zxcByClassName(nme,el,tag){
if (typeof(el)=='string') el=document.getElementById(el);
el=el||document;
for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)) ary.push(els[z0]);
}
return ary;
}


/*]]>*/
</script></head>

<body>
<img id="img1" class="fade2" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="50" />
<img id="img2" class="fade1 fade2" src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="50" height="50" />
<br />
<img id="img3" class="fade2" src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="50" height="50" />
<img id="img4" class="fade2" src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" width="50" height="50" />
<img id="img5" class="fade1 fade 2" src="http://www.vicsjavascripts.org.uk/StdImages/Five.gif" width="50" height="50" />
<img id="img6" class="fade2" src="http://www.vicsjavascripts.org.uk/StdImages/Six.gif" width="50" height="50" />
<img id="img7" class="fade2" src="http://www.vicsjavascripts.org.uk/StdImages/Seven.gif" width="50" height="50" />

<script type="text/javascript">
/*<![CDATA[*/
new MultiFade('img1','fade1',50,100,1000);
new MultiFade('img2','fade2',50,100,500);
/*]]>*/
</script>

</body>

</html>

tbuck
11-06-2009, 12:32 PM
Thanks David and Vic! Let me jump into these today and I'll post if I have questions.

tbuck
11-06-2009, 03:00 PM
sorry don't really understand what did you mean?

May be like this one:

http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm


good luck.:)

Dave,
This example is similar to what I am trying. The auto display mode example with images does what I want except that instead of a single image fading in and out, I have a grid of thumbnails. I want some of the thumbnails that are related to the mouseover button to fade in while others remain faded out. Move to as second button and different thumbs fade in and out, etc.

Each of the thumbnails resides in a cell of a table set within a div on the page. All of the code is otherwise css.

There will be an on click action, but I think I know what to do there.