conveyor belt slideshow

**germane** · 12-02-2009, 08:05 PM

Can someone tell me how to combine the conveyor belt slide show with click on left and right and stop buttons that move the thumbnails(if 5 are showing to the next five) Thank you so much.
Germane

**vwphillips** · 12-03-2009, 03:45 PM

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;left:60px;width:400px;height:60px;border:solid black 1px;float:left;
}

.V {
  position:relative;overflow:hidden;width:100px;height:250px;border:solid black 1px;
}
/*]]>*/
</style>
<script type="text/javascript">
// Animate (28-November-2009)
// 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.

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
//
// The element would normally be assigned a unique ID name.
//

// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimate('left','id1')
// where:
//  A           = a global variable                                                               (variable)
//  parameter 0 = the mode(see Note 1).                                                           (string)
//  parameter 1 = the unique ID name or element object.                                           (string or element object)
//  parameter 1 = the initial value.                                                              (digits, default = 0)

// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
// where:
//  A           = the global referencing the script instance.                                 (variable)
//  parameter 0 = the start value.                                                            (digits, for opacity minimum 0, maximum 100)
//  parameter 1 = the finish value.                                                           (digits, for opacity minimum 0, maximum 100)
//  parameter 2 =  period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
//  parameter 3 = (optional) to scale the effect time on a specified minimum/maximum.         (array, see Note 3)
//                 field 0 the minimum value. (digits)
//                 field 1 the maximum value. (digits)
//  parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                (string, default = 'liner')
//                 'sin' progression starts fast and ends slow.
//                 'cos' progression starts slow and ends fast.
//
//  Note 1:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
//  Note 2:  The default units(excepting opacity) are 'px'.
//           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
//  Note 3:  The scale is of particular use when re-calling the effect
//           in mid progression to retain an constant rate of progression.
//  Note 4:  The current effect value is recorded in A.data[0].
//  Note 5:  A function may be called on completion of the effect by assigning the function
//           to the animator intance property .Complete.
//           e.g. [instance].Complete=function(){ alert(this.data[0]); };
//



// **** 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.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.mde!='left'&&this.mde!='top')&&this.data[0]<0) 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>

<script type="text/javascript">
/*<![CDATA[*/
// by Vic Phillips (03-12-2009)
// http://www.vicsjavascripts.org.uk


function zxcPan(opts){
 var slide=document.getElementById(opts.id);
 if (slide){
  this.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;
  this.clds=[];
  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;
    this.clds.push(clds[z0]);
   }
  }
  slide.style[this.mde[2]]=lft+'px';
  this.slide=[[slide,-lft,new zxcAnimate(this.mde[0],slide)]];
  var nu=Math.max(Math.ceil(this.obj[this.mde[4]]/lft)+1,3);
  for (var z1=0;z1<nu;z1++){
   this.slide[z1+1]=[slide.cloneNode(true),lft*z1];
   this.slide[z1+1][2]=new zxcAnimate(this.mde[0],this.slide[z1+1][0]);
   this.obj.appendChild(this.slide[z1+1][0]);
  }
  this.lft=lft;
  this.ud=typeof(opts.direction)=='number'?opts.direction>0?1:-1:1;
  this.ms=10;
  this.Next(0);
  this.ms=typeof(opts.milliseconds)=='number'?opts.milliseconds:1000;
 }
}

zxcPan.prototype.Next=function(nu,ud){
 this.ud=typeof(ud)=='number'?ud>0?1:-1:this.ud;
 this.inc=ud?this.inc:0;
 var lft=this.clds[nu%this.clds.length].offsetLeft;
 for (var lgth=this.slide.length,z0=0;z0<lgth;z0++){
  this.slide[z0][1]+=lft*this.ud;
  this.slide[z0][0].style.visibility='visible';
  if ((this.ud<0&&this.slide[z0][1]<-this.lft*2)||(this.ud>0&&this.slide[z0][1]>this.lft*(lgth-2))){
  this.slide[z0][0].style.visibility='hidden';
   this.slide[z0][1]+=this.lft*lgth*(this.ud<0?1:-1);
  }
  this.slide[z0][2].animate(this.slide[z0][0].offsetLeft,this.slide[z0][1],this.ms,[0,this.lft]);
 }
}


/*]]>*/
</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="100" 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>
 <input  type="button" name="" value="Next" onclick="S.Next(5,1);"/>
 <input  type="button" name="" value="Next" onclick="S.Next(5,-1);"/>
 <br />
<script type="text/javascript">
/*<![CDATA[*/

var S=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)
 separation:5,     // (optional) the separation between the div elements.      (digits, default = 0)
 direction:-1,     // (optional) the initial direction, 1 or -1.               (digits, default = 1)
 milliseconds:500 // (optional) the duration of the maximum slide .            digits, default = 1000)
});



</script>
</body>

</html>

**germane** · 12-19-2009, 07:47 PM

Thank you for your help. On opening the script that you sent isn't moving.
Can you take a look at my link (I used your script) now theconveyor belt is moving but the buttons don't function. Also I would like to add a stop button. I don't need the conveyor belt to scroll on mouseover.
I really appreciate your help and thank you for the great script.
Here is my link:
http://www.webgermane.com/safety/safety1.html

Germane

**jscheuer1** · 12-19-2009, 09:04 PM

Please post about Dynamic Drive Scripts in the Dynamic Drive Scripts Help section here where I've moved this thread, and:

Warning: Please include a link to the DD script(s) in question in your post. See this thread for the proper posting format when asking a question.

You may want to use:

http://www.dynamicdrive.com/dynamici...wler/index.htm

Which is not too hard to make up buttons for, or:

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

Easier to make buttons for.

Both can be Cmotion like (mouse driven) or an ordinary scroller (with or without mouseover pause). The second can go vertical or horizontal. The buttons for either can be placed anywhere on the page and be made to look however you want. Both are continuous belts, no 'end of gallery'. The first may be set to a percent width like Cmotion can. Both may be used for one or more shows on a page. The Lightbox tie in for the second one is not required.

Any questions about either one, let me know.

**germane** · 12-19-2009, 11:39 PM

Thankyou, I added a stop button for
http://home.comcast.net/~jscheuer1/s...magemotion.htm
but I don't understand how to add button prev and next that skip over 5 slides.
Is that possible?

**germane** · 12-19-2009, 11:59 PM

A light bulb went off and I realized how to work with this script:
http://www.dynamicdrive.com/dynamici...wler/index.htm

Maybe you can tell me the code for a prev and next button skip over 5 slides?

Thank so much.
Germane

**germane** · 12-21-2009, 09:54 PM

1) Script Title: Text and Image Crawler

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...wler/index.htm

3) Describe problem:
I understand how to add a stop button, but can you please tell me how to add a previous and next button.
Thank you
Germane

**germane** · 12-21-2009, 10:05 PM

Dear Vic,
Thank you for the script but the conveyor belt is not moving on opening. Can you tell me how to fix that. Also is it possible to add a stop button instead of hover stop.
I really appreciate your help.
Germane Tautz

**jscheuer1** · 12-22-2009, 01:42 AM

Originally Posted by germane

A light bulb went off and I realized how to work with this script:
http://www.dynamicdrive.com/dynamici...wler/index.htm

Maybe you can tell me the code for a prev and next button skip over 5 slides?

Thank so much.
Germane

There really is no next/previous or skip over x number of images in a continuous scroller.

Perhaps:

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

would be more for you.