SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Looking for a slider with specific functionality

    I have a client with a garage door service company that I did a simple business site for and id like to pull this off for him...

    Looking for some sort of js 'garage door' image slider/carousel that I can put one image that would serve as a transition from one image to the next, it would be an image/vector of a garage door. To be more clear, when page loads up you have the first image of the carousel showing, 5 seconds later the 'garage door' image slides down from the top to the bottom and goes back up revealing image #2...so on and so forth.

    Hopefully that made sense...I can seem to find and gpl code to use and my hand authoring of js is not that advanced. Maybe someone here knows of something that I can use.

    Thanks.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,601
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    This is not what you want, but in case you don't find something appropriate, it's worth having a look at jQuery cycle, as it has a lot of options that might get reasonably close to what you are after.

    http://jquery.malsup.com/cycle/adv.html

  3. #3
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,489
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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[*/
    
    .door {
      position:absolute;left:100px;top:100px;width:200px;height:150px;border:solid red 1px;
    }
    
    .door IMG {
      width:200px;height:150px;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    <input type="button" name="" value="GoTo 0" onmouseup="zxcDoors.GoTo('doors',0);"/>
    <input type="button" name="" value="GoTo 1" onmouseup="zxcDoors.GoTo('doors',1);"/>
    <input type="button" name="" value="GoTo 2" onmouseup="zxcDoors.GoTo('doors',2);"/>
    <input type="button" name="" value="GoTo 3" onmouseup="zxcDoors.GoTo('doors',3);"/>
    <input type="button" name="" value="GoTo 4" onmouseup="zxcDoors.GoTo('doors',4);"/>
    <input type="button" name="" value="Pause" onmouseup="zxcDoors.Pause('doors');"/>
    <input type="button" name="" value="Auto" onmouseup="zxcDoors.Auto('doors',0);"/>
    <div id="doors" class="door" >
     <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="door" />
     <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="door" />
     <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="door" />
     <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="door" />
     <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="door" />
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcDoors={
    
     init:function(o){
      var id=o.ID,p=document.getElementById(id),clds=p.getElementsByTagName('IMG'),ms=o.AnimateDuration,ms=typeof(ms)=='number'?ms:1000,hold=o.HoldDuration,srt=o.AutoStart,z0=0;
      for (var z0=0;z0<clds.length;z0++){
       clds[z0].style.position='absolute';
       clds[z0].style.zIndex=z0>0?'0':'2';
       clds[z0].style.left='0px';
       clds[z0].style.top='0px';
      }
      var obj=zxcDoors['zxc'+id]={
       id:id,
       sz:clds[0].height,
       clds:clds,
       lgth:clds.length-1,
       ms:ms,
       hold:typeof(hold)=='number'?hold:ms*2,
       cnt:0,
       ud:1
      }
      if (o.AddEvents!==false){
       this.addevt(p,'mouseover','Pause',id);
       this.addevt(p,'mouseout','Auto',id);
      }
      if (typeof(srt)=='number'){
       this.Auto(id,srt);
      }
     },
    
     GoTo:function(id,nu){
      var o=zxcDoors['zxc'+id];
      if (o&&o.clds[nu]){
       this.open(o,nu,false);
      }
     },
    
    
     Auto:function(id,ms){
      var o=zxcDoors['zxc'+id];
      if (o){
       var oop=this;
       o.to=setTimeout(function(){ oop.open(o,o.cnt+o.ud,true); },ms||200);
      }
     },
    
    
     Pause:function(id){
      var o=zxcDoors['zxc'+id];
      if (o){
       clearTimeout(o.to);
       o.auto=false;
      }
     },
    
     open:function(o,nu,auto){
      this.Pause(o.id);
      var img=o.clds[o.cnt];
      nu=nu<0?o.lgth:nu>o.lgth?0:nu;
      o.auto=auto==true;
      o.clds[nu].style.height=o.sz;
      o.clds[nu].style.zIndex='1';
      img.style.zIndex='2';
      clearTimeout(o['to'+o.cnt]);
      this.animate(o,img,img.height,0,new Date(),o.ms*Math.abs(img.height/o.sz),'to'+o.cnt);
      o.cnt=nu;
     },
    
     animate:function(o,img,f,t,srt,mS,to){
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)){
       now=Math.max(now,f<0||t<0?now:0);
       img.style.height=now+'px';
      }
      if (ms<mS){
       o[to]=setTimeout(function(){ oop.animate(o,img,f,t,srt,mS,to); },10);
      }
      else {
       img.style.zIndex='0';
       if (o.auto){
        oop.Auto(o.id,o.hold);
       }
      }
     },
    
     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); });
     }
    
    }
    
    zxcDoors.init({
     ID:'doors',            // the unique Id name of the parent node.                                             (string)
     AnimateDuration:1000,  //(optional) the animation duration in milli seconds.                                 (number, default = 1000)
     HoldDuration:2000,     //(optional) the auto rotate 'hold' duration in milli seconds.                        (number, default = AnimateDuration*2)
     AutoStart:2000,        //(optional) the auto rotate auto start duration in milli seconds.                    (number, default = no auto start)
     AddEvents:true         //(optional) true = add mouseover pause and mouseout Auto, false = do not add events. (boolean. default = true)
    });
    /*]]>*/
    </script>
    </body>
    
    </html>

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. Nice idea but not what im after though.

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is the closest thing Ive found but instead of the shutter image doing what it does I would need an image/vector sliding from top to bottom.

    http://demo.tutorialzine.com/2011/03...hutter-effect/

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,601
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Hm, it's pretty clever the way they do that, but a lot of the script is written just for that shutter effect, which uses this image:

    http://demo.tutorialzine.com/2011/03...er/shutter.png

    It would take a fair bit of knowhow to modify the script to do what you want, I'd think.


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
  •