Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: conveyor belt slideshow

  1. #1
    Join Date
    Apr 2009
    Posts
    10
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default conveyor belt slideshow

    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

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

    Default

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

  3. The Following User Says Thank You to vwphillips For This Useful Post:

    germane (12-20-2009)

  4. #3
    Join Date
    Apr 2009
    Posts
    10
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    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

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    germane (12-20-2009)

  7. #5
    Join Date
    Apr 2009
    Posts
    10
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    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?

  8. #6
    Join Date
    Apr 2009
    Posts
    10
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    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
    Last edited by jscheuer1; 12-20-2009 at 05:59 AM. Reason: fix broken link

  9. #7
    Join Date
    Apr 2009
    Posts
    10
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default Add buttons

    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

  10. #8
    Join Date
    Apr 2009
    Posts
    10
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    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

  11. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by germane View Post
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  12. The Following User Says Thank You to jscheuer1 For This Useful Post:

    germane (12-22-2009)

  13. #10
    Join Date
    Apr 2009
    Posts
    10
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Thank you I tried that and it works. How can I make a manual stop button?

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
  •