Seeking script with this functionality

**galina** · 05-18-2010, 04:20 PM

I am looking for a script that has the same functionality as this:

http://www.templatemonster.com/flash...tes/20530.html

When you move the mouse over the images effect..

Are there any scripts either flash based or non flash that do the same?

**djr33** · 05-18-2010, 05:48 PM

Flash, yes, but I don't know where-- I'd suggest looking on google. For flash you often must pay a small fee, but usually it is not too expensive.

Not flash (Javascript), maybe. You will NOT find something that works exactly like that (no sound, simpler animation), but there are image galleries that use the mouse.

For example, try this one: http://www.dynamicdrive.com/dynamici...iongallery.htm

There are other scripts like it in the same category.

If you don't like that one, then keep looking: you will probably find something close.

If you need it to be exactly like the example, you will need to use flash, but Javascript can do basically the same "idea", using the mouse to select a picture.

**vwphillips** · 05-21-2010, 04:17 PM

similar

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[*/
.parent {
  position:relative;left:50px;top:10px;width:800px;height:100px;border:solid black 1px;
}

.slide {
  position:absolute;left:150px;top:0px;width:3000px;border:solid red 0px;
}

.slide IMG{
  position:relative;width:100px
}

/*]]>*/
</style>
<script type="text/javascript">
// Animate (11-January-2010)
// 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.


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

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

zxcAnimate.prototype.animate=function(srt,fin,ms,scale,c){
 clearTimeout(this.to);
 this.time=ms||this.time||0;
 this.neg=srt<0||fin<0;
 this.data=[srt,srt,fin];
 this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(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')?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:(this.c=='c')?this.data[2]-(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.data[0]<0&&!this.neg) this.data[0]=0;
  if (this.mde!='opacity') this.obj.style[this.mde]=Math.floor(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>


</head>

<body>
<div class="parent" >
<div id="tst" class="slide" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt11.jpg" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt12.jpg" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt13.jpg" />
</div>
</div>
<div class="slide" style="position:relative;top:40px;">
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt11.jpg" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt12.jpg" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt13.jpg" />
</div>

<input type="button" name="" value="Next" onclick="ES.Next();" />
<input type="button" name="" value="Previous" onclick="ES.Previous();" />
<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:visible;top:420px;left:0px;" >
<input size=100 name=Show0 >
<input size=10 name=Show1 >
<input size=10 name=Show2 >
<input size=10 name=Show3 >
<input size=10 name=Show4 >
<input size=10 name=Show5 >
<input size=10 name=Show6 >
<input size=10 name=Show7 >
<input size=10 name=Show8 >
<input size=10 name=Show9 ><br>
<textarea name=TA rows=1 cols=100 ></textarea>
</form>

<script type="text/javascript">
/*<![CDATA[*/
// ExpandSlide (21-May-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk

function zxcExpandSlide(o){
 var obj=document.getElementById(o.ID)
 var imgs=obj.getElementsByTagName('IMG');
 this.oops=[];this.use=[];
 this.nu=o.Number;
 this.os=o.Offset||0;
 for (var w=0,z0=0;z0<imgs.length;z0++){
  this.oops[z0]=[imgs[z0],new zxcAnimate('left',imgs[z0],w),new zxcAnimate('width',imgs[z0],imgs[z0].width),new zxcAnimate('opacity',imgs[z0],100)];
  imgs[z0].style.position='absolute';
  imgs[z0].style.left=w+'px';
  w+=imgs[z0].width+this.os;
  this.addevt(imgs[z0],'mouseover','Expand',z0);
  if (z0<this.nu){
   this.use[z0]=this.oops[z0];
  }
  else {
   imgs[z0].style.width='0px';
  }
 }
 var opac=o.MinOpacity||100;
 this.opacity=[opac,100-opac];
 this.next=this.nu;
 this.prev=this.oops.length-1;
 this.expand=[imgs[0].width,o.MaxWidth-imgs[0].width];
 this.cwidth=obj.parentNode.offsetWidth;
 this.obj=new zxcAnimate('left',obj,obj.offsetLeft);
 this.top=o.Top||0;
 this.ms=o.Duration||1000;
 this.Expand(Math.floor(this.nu/2));
}

zxcExpandSlide.prototype={

 Expand:function(nu){
  var scale=this.use[this.nu-1][0].offsetLeft;
  var pos=this.oops[nu][1].data[0]+.1;
  this.save=[];
  for (var s,w,lft=0,z0=0;z0<this.use.length;z0++){
   s=1-Math.abs(this.use[z0][1].data[0]-pos)/scale;
   w=this.expand[0]+this.expand[1]*s;
   this.save[z0]=[lft,w,this.opacity[0]+this.opacity[1]*s];
   this.use[z0][1].animate(this.use[z0][1].data[0],lft,this.ms);
   this.use[z0][2].animate(this.use[z0][2].data[0],w,this.ms);
   this.use[z0][3].animate(this.use[z0][3].data[0],this.save[z0][2],this.ms);
   lft+=w+this.os;
  }
  this.obj.animate(this.obj.data[0],(this.cwidth-lft)/2+this.os,this.ms);
 },

 Previous:function(nu){
  var nu=this.prev;
  this.oops[nu][1].data[0]=0;
  this.oops[nu][2].data[0]=0;
  var ary=[this.oops[nu]];
  for (var z0=0;z0<this.nu-1;z0++){
   ary.push(this.use[z0]);
  }
  this.use[this.nu-1][2].animate(this.use[this.nu-1][2].data[0],0,this.ms);
  this.use[this.nu-1][1].animate(this.use[this.nu-1][1].data[0],this.use[this.nu-1][1].data[0]+this.use[this.nu-1][2].data[0],this.ms);
  this.use=ary;
  this.Save();
  this.next=(this.prev+5)%this.oops.length;
  this.prev-=1;
  if (this.prev<0){
   this.prev=this.oops.length-1;
  }
 },

 Next:function(nu){
  var nu=this.next;
  this.use[0][2].animate(this.use[0][2].data[0],0,this.ms);
  this.oops[nu][2].data[0]=0;
  this.oops[nu][1].data[0]=this.use[this.nu-1][2].data[0]+this.use[this.nu-1][1].data[0];
  var ary=[];
  for (var z0=1;z0<this.nu;z0++){
   ary.push(this.use[z0]);
  }
  ary.push(this.oops[nu]);
  this.use=ary;
  this.Save();
  this.prev=++this.prev%this.oops.length;
  this.next=++this.next%this.oops.length;
 },

 Save:function(){
   for (var z1=0;z1<this.save.length;z1++){
   this.use[z1][1].animate(this.use[z1][1].data[0],this.save[z1][0],this.ms);
   this.use[z1][2].animate(this.use[z1][2].data[0],this.save[z1][1],this.ms);
   this.use[z1][3].animate(this.use[z1][3].data[0],this.save[z1][2],this.ms);
  }
 },

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

var ES=new zxcExpandSlide({
 ID:'tst',
 Number:5,
 MaxWidth:150,
 Offset:10,
 MinOpacity:40,
 Duration:200
});


/*]]>*/
</script>

</body>

</html>

Thread: Seeking script with this functionality

Thread Tools

Search Thread

Seeking script with this functionality

Bookmarks

Bookmarks

Posting Permissions