Results 1 to 3 of 3

Thread: Seeking script with this functionality

  1. #1
    Join Date
    Mar 2007
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Seeking script with this functionality

    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?

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •