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.

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

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

Thanks. Nice idea but not what im after though.

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/photography-portfolio-shutter-effect/

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:


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