Belt slideshow script

**nipens** · 11-25-2009, 11:28 PM

Hi,

How do I add a forward and backward button (arrow at the start and end of Belt slide) that will fast-forward or rewind the images in the Belt slideshow script http://www.dynamicdrive.com/dynamici...rightslide.htm just like the Continue shopping section at the bottom of http://www.amazon.com/

Thanks for your help in advance.

Regds,
Nipen

**vwphillips** · 11-26-2009, 01:22 PM

I cant modify the DD script but this may be of interest

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[*/
.H {
  position:relative;overflow:hidden;width:400px;height:50px;border:solid black 1px;
}

.V {
  position:relative;overflow:hidden;width:100px;height:250px;border:solid black 1px;
}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// by Vic Phillips (20-11-2009)
// http://www.vicsjavascripts.org.uk

// Functional Code(3.14K) - No Need to Change.

function zxcPan(opts){
 var slide=document.getElementById(opts.id);
 if (slide){
  var obj=slide.parentNode;
  slide.style.position='absolute';
  var mde=typeof(opts.mode)=='string'?opts.mode:'H';
  this.mde=mde.charAt(0).toUpperCase()=='V'?['top','left','height',1,'offsetHeight']:['left','top','width',0,'offsetWidth'];
  var clds=slide.childNodes;
  var s=typeof(opts.separation)=='number'?opts.separation:0;
  for (var lft=0,z0=0;z0<clds.length;z0++){
   if (clds[z0].nodeType==1){
    clds[z0].style.position='absolute';
    clds[z0].style[this.mde[0]]=lft+'px';
    clds[z0].style[this.mde[1]]='0px';
    lft+=clds[z0][this.mde[4]]+s;
   }
  }
  slide.style[this.mde[2]]=lft+'px';
  this.slide=[[slide,-lft]];
  var nu=Math.max(Math.ceil(obj[this.mde[4]]/lft)+1,3);
  for (var z1=0;z1<nu;z1++){
   this.slide[z1+1]=[slide.cloneNode(true),lft*z1];
   obj.appendChild(this.slide[z1+1][0]);
  }
  this.lft=lft;
  this.spd=typeof(opts.defaultspeed)=='number'?opts.defaultspeed:1;
  this.ud=typeof(opts.direction)=='number'?opts.direction>0?1:-1:1;
  this.Pan(opts.start?this.spd:0);
  this.max=typeof(opts.maxspeed)=='number'?opts.maxspeed:5;
  pan=typeof(opts.distance)=='number'?opts.distance:obj[this.mde[4]]/4;
  this.pan=[pan,obj[this.mde[4]]-pan];
  this.addevt(obj,'mousemove','Move');
  this.addevt(obj,'mouseout','MseOut');
  this.obj=obj;
 }
}

zxcPan.prototype.Pan=function(ud){
 clearTimeout(this.to);
 for (var oop=this,lgth=this.slide.length,z0=0;z0<lgth;z0++){
  this.slide[z0][1]+=ud*this.ud;
  this.slide[z0][0].style[this.mde[0]]=this.slide[z0][1]+'px';
  if ((this.ud<0&&this.slide[z0][1]<-this.lft)||(this.ud>0&&this.slide[z0][1]>this.lft*(lgth-2))){
   this.slide[z0][1]+=this.lft*lgth*(this.ud<0?1:-1);
  }
 }
 if (this.ud!=0){
  this.to=setTimeout(function(){ oop.Pan(ud); },20);
 }
}

zxcPan.prototype.MseOut=function(e){
 var obj=e.relatedTarget||e.toElement;
 while (obj.parentNode){
  if (obj==this.obj){
   return;
  }
  obj=obj.parentNode;
 }
 this.Pan(this.spd);
}

zxcPan.prototype.Move=function(e){
 var x=zxcMse(e)[this.mde[3]]-zxcPos(this.obj)[this.mde[3]];
 var ud=0;
 if (x<this.pan[0]){
  this.ud=1;
  ud=this.max*(1-x/this.pan[0]);
 }
 if (x>this.pan[1]){
  this.ud=-1;
  ud=this.max*((x-this.pan[1])/this.pan[0]);
 }
 this.Pan(ud);
}

zxcPan.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 zxcMse(ev){
 if(!ev) var ev=window.event;
 if (document.all) return [ev.clientX+zxcDocS()[0],ev.clientY+zxcDocS()[1]];
 return [ev.pageX,ev.pageY];
}

function zxcDocS(){
 if (!document.body.scrollTop) return [document.documentElement.scrollLeft,document.documentElement.scrollTop];
 return [document.body.scrollLeft,document.body.scrollTop];
}

function zxcPos(obj){
 var rtn=[0,0];
 while(obj){
  rtn[0]+=obj.offsetLeft;
  rtn[1]+=obj.offsetTop;
  obj=obj.offsetParent;
 }
 return rtn;
}


/*]]>*/
</script>

</head>

<body>
Mouseover the ends to pan
 <div class="H" >
  <div id="H1" >
   <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="50" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="100" height="50" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="50" height="50" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" width="100" height="50" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Five.gif" width="100" height="50" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Six.gif" width="100" height="50" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Seven.gif" width="100" height="50" />
  </div>
 </div>
 <br />
 <div class="V" >
  <div id="V1" >
   <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="50" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="100" height="50" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="100" height="50" />
  </div>
 </div>
<script type="text/javascript">
/*<![CDATA[*/

new zxcPan({
 mode:'H',        // the mode, H = horizontal, V = vertical.                  (string, default = H)
 id:'H1',         // the unique id name of the div to scroll.                 (string)
 defaultspeed:1,  // (optional) the default speed to pan, 1 = slow, 5 = fast. (digits, default = 1)
 distance:50,     // (optional) the distance from the ends to pan.            (digits, default = parent noden width/4)
 maxspeed:10,     // (optional) the maximum speed to pan.                     (digits, default = 5)
 separation:5,    // (optional) the separation between the div elements.      (digits, default = 0)
 direction:-1,    // (optional) the initial direction, 1 or -1.               (digits, default = 1)
 start:true       // (optional) start automatically.                          (boolean, default = false = no autostart)
});

var S=new zxcPan({
 mode:'V',
 id:'V1'
});


</script>
</body>

</html>

**jscheuer1** · 11-26-2009, 01:46 PM

Also check:

http://www.dynamicdrive.com/dynamici...epcarousel.htm

**nipens** · 11-26-2009, 10:50 PM

Thanks for your help. The code (Vic) is not working properly in IE. Pl advise.

**vwphillips** · 11-27-2009, 10:15 AM

I have just tested the script I posted in IE 7 and it works for me.

**jscheuer1** · 11-27-2009, 11:42 AM

Here's something I've been playing with:

http://home.comcast.net/~jscheuer1/s...magemotion.htm

The conveyor's can be of various orientations and types. You may use one or more per page. You may use all or none of the buttons or just some. The buttons may be images or plain links if you prefer and may be placed wherever you like on the page. The tie in to Lightbox is not required. If skipped, none of the Lightbox code is needed.

I'm currently considering changing the way the First and Last buttons operate to make the animation more consistent/intuitive appearing regardless of what position the sliding content is in when they are invoked.

**nipens** · 12-02-2009, 01:50 AM

Thanks a Lot!

Thread: Belt slideshow script

Thread Tools

Search Thread

Belt slideshow script

Bookmarks

Bookmarks

Posting Permissions