Results 1 to 5 of 5

Thread: Conveyor Belt Features

  1. #1
    Join Date
    Jan 2011
    Posts
    1
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Conveyor Belt Features

    1) Script Title:
    Conveyor Belt Slideshow &
    Ultimate Fade-In Slideshow

    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...rightslide.htm
    http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

    3) Describe problem:
    It isn't really a problem, it's more of a feature request for the author of the Conveyor Belt Slideshow. If you look at the Ultimate Fade-In Slideshow, you can see that there is an optional feature referred to as "peekaboo". This feature allows the user to add a caption to the image that is revealed only when the image is hovered over. I would like to be able to add a similar hover-over caption to the images in the Conveyor Belt Slideshow. If this is a possibility, please let me know.

    Thanks,
    cyberspectre

  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[*/
    
    #tst {
      position:relative;left:200px;top:20px;width:400px;height:150px;border:solid black 1px;
    }
    
    .slide {
      position:absolute;left:0px;top:0px;width:584px;
    }
    
    
    .slide IMG {
      float:left;margin-Left:5px;
    }
    
    .panel {
      width:100%;height:30px;background-Color:#FFFFCC;text-Align:center;border-Top:solid red 1px;
    }
    
    /*]]>*/
    </style>
    
    <script type="text/javascript">
    // Animate (11-January-2010)
    // 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.52K) - 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.neg=srt<0||fin<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();
     },
    
     cng:function(){
      var oop=this,ms=new Date().getTime()-this.srttime;
      this.data[0]=Math.floor(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);
      }
     },
    
     apply:function(){
      if (isFinite(this.data[0])){
       if (this.data[0]<0&&!this.neg) this.data[0]=0;
       if (this.mde!='opacity') this.obj.style[this.mde]=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.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
    }
    
    
    </script>
    
    
    
    </head>
    
    <body>
    <div id="tst" >
     <div class="slide" >
      <a href="http://"><img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border=1></a>
      <a href="http://"><img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook2.gif" border=1></a>
      <a href="http://"><img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook3.gif" border=1></a>
      <a href="http://"><img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook4.gif" border=1></a>
      <a href="http://"><img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook5.gif" border=1></a>
     </div>
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function peekaboo(o){
     var oop=this,obj=document.getElementById(o.ID),slide=obj.getElementsByTagName('DIV')[0],sz=slide.offsetWidth,panel=document.createElement('DIV'),nu,z0=0,z1=0,z1a=0,h,ph,mm,imgs,slideary=[];
     obj.style.overflow='hidden';
     panel.style.position='absolute';
     panel.style.left=-sz+'px';
     panel.style.top='0px';
     obj.appendChild(panel);
     nu=Math.ceil(obj.offsetWidth/sz+2);
     for (;z0<nu;z0++){
      slide=z0>0?slide.cloneNode(true):slide;
      panel.appendChild(slide);
      slide.style.left=z0*sz+'px';
      imgs=slide.getElementsByTagName('IMG')
      slideary.push(slide);
     }
     this.sz=sz;
     this.slider=new zxcAnimate('left',panel,-sz);
     this.slider.Complete=function(){
      oop.animate();
     }
     this.addevt(obj,'mouseover','Pause');
     this.addevt(obj,'mouseout','Auto');
     this.ud=typeof(o.Direction)=='number'&&o.Direction>0?1:-1;
     this.to=null;
     this.ms=o.AnimationSpeed||2000;
     if (o.HTMLArray&&o.PanelClassName){
      h=obj.offsetHeight;
      panel=document.createElement('DIV');
      panel.className=o.PanelClassName;
      obj.appendChild(panel);
      panel.style.position='absolute';
      panel.style.zIndex='101';
      panel.style.left='0px';
      ph=panel.offsetHeight;
      mm=[h+2,h-ph,ph]
      panel.style.top=mm[0]+'px';
      this.panel=new zxcAnimate('top',panel,mm[0]);
      this.pms=o.PanelSpeed||1000;
      this.mm=mm;
      this.ary=o.HTMLArray||[];
      imgs=this.slider.obj.getElementsByTagName('IMG');
      for (;z1<imgs.length;z1++){
       this.addevt(imgs[z1],'mouseover','panelanimate',z1%(this.ary.length-1));
      }
     }
     this.animate();
    }
    
    peekaboo.prototype={
    
    
     Pause:function(nu){
      clearTimeout(this.slider.to);
      clearTimeout(this.to);
     },
    
     Auto:function(){
      var oop=this;
      this.to=setTimeout(function(){ oop.auto(); },200);
     },
    
     auto:function(){
      if (this.panel){
       this.panelanimate('close');
      }
      this.animate();
     },
    
     animate:function(){
      var data=this.slider.data[0];
      if ((this.ud<0&&data<-this.sz)||(this.ud>0&&data>-this.sz)){
       data=-this.sz;
      }
      this.slider.animate(data,data+this.sz*this.ud,this.ms,[0,this.sz]);
     },
    
     panelanimate:function(ud){
      this.panel.obj.innerHTML=this.ary[ud]||'';
      this.panel.animate(this.panel.data[0],this.mm[typeof(ud)=='number'?1:0],this.pms,[0,this.mm[1]]);
     },
    
     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); });
     }
    
    }
    
    P=new peekaboo({
     ID:'tst',
     AnimationSpeed:3000,
     Direction:-1,
     PanelClassName:'panel',
     PanelSpeed:500,
     HTMLArray:[
      'Book 1',
      'Book 2',
      'Book 3',
      'Book 4',
      'Book 5',
     ]
    });
    /*]]>*/
    </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:

    cyberspectre (03-08-2011)

  4. #3
    Join Date
    Apr 2015
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Conveyor belt variation

    Hi there. This is a great script and exactly what I need for my website. I am wondering if there is a hover-over image option where, similar to be option where the description shows below the images, the image instead changes to another image and once mouse leaves the image changes back to the original one? Basically I want to add a description for each image, however it's too long to fit below. What I am looking for is onMouseOver/onMouseOut kind of thing...
    Thank you much

    cheers

  5. #4
    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>
      <base href="http://www.vicsjavascripts.org/StdImages/"  />
    <style type="text/css">
    /*<![CDATA[*/
    
    #tst {
      position:relative;left:200px;top:20px;width:400px;height:150px;border:solid black 1px;
    }
    
    .slide {
      position:absolute;left:0px;top:0px;width:584px;
    }
    
    
    .slide IMG {
      width:105px;height:140px;float:left;margin-Left:5px;
    }
    
    .panel {
      width:100%;height:30px;background-Color:#FFFFCC;text-Align:center;border-Top:solid red 1px;
    }
    
    /*]]>*/
    </style>
    
    
    
    </head>
    
    <body>
    <div id="tst" >
     <div class="slide" >
      <img src="1.gif" border=1>
      <img src="2.gif" border=1>
      <img src="3.gif" border=1>
      <img src="4.gif" border=1>
     </div>
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function peekaboo(o){
     var oop=this,ms=o.AnimationSpeed,ud=o.Direction,mse=o.MouseoverSRC,p=document.getElementById(o.ID),s=p?p.getElementsByTagName('DIV')[0]:null;
     if (s){
      var slide=document.createElement('DIV'),nu,i=s.getElementsByTagName('IMG'),l=i[i.length-1],sz=l.offsetLeft+l.offsetWidth,z0=0,z1=0;
      p.style.overflow='hidden';
      slide.style.position='absolute';
      slide.style.left=-sz+'px';
      slide.style.top='0px';
      slide.style.width=sz+5+'px';
      p.appendChild(slide);
      nu=Math.ceil(p.offsetWidth/sz+2);
      for (;z0<nu;z0++){
       s=z0>0?s.cloneNode(true):s;
       slide.appendChild(s);
       s.style.left=z0*sz+'px';
      }
      this.sz=sz;
      this.a=[slide,'left',-sz];
      this.addevt(p,'mouseover','Pause');
      this.addevt(p,'mouseout','Auto');
      this.ud=typeof(ud)=='number'&&ud>0?1:-1;
      this.to=null;
      this.ms=typeof(ms)=='number'&&ms>0?ms:2000;
      if (mse&&mse instanceof Array){
       this.msea=[];
       i=slide.getElementsByTagName('IMG');
       for (;z1<i.length;z1++){
        this.msea[z1]=[i[z1],i[z1].src,mse[z1%mse.length]];
        this.addevt(i[z1],'mouseover','mse',z1,2);
        this.addevt(i[z1],'mouseout','mse',z1,1);
       }
      }
      this.scroll();
     }
    }
    
    peekaboo.prototype={
    
     Pause:function(){
      clearTimeout(this.to);
      clearTimeout(this.a[4]);
     },
    
     Auto:function(){
      var oop=this;
      this.to=setTimeout(function(){ oop.auto(); },200);
     },
    
     auto:function(){
      this.scroll();
     },
    
     scroll:function(){
      var o=this,t=o.ud>0?0:-o.sz;
      this.animate(o,o.a,o.a[2],t,new Date(),o.ms*Math.abs((t-o.a[2])/o.sz));
     },
    
    
     animate:function(o,a,f,t,srt,mS){
      clearTimeout(a[4]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[2]=n;
       a[0].style[a[1]]=a[2]+'px';
      }
      if (ms<mS){
       a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       a[2]=t==0?-o.sz:0;
       a[0].style[a[1]]=t+'px';
       o.scroll();
      }
     },
    
     mse:function(n,ud){
      var i=this.msea[n];
      i[0].src=i[ud];
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1,e);}, false):o.attachEvent('on'+t,function(e){ return oop[f](p,p1,e); });
     }
    
    }
    
    P=new peekaboo({
     ID:'tst',
     AnimationSpeed:5000,
     Direction:-1,
     MouseoverSRC:[
      '5.gif',
      '6.gif',
      '7.gif',
      '8.gif'
     ]
    });
    /*]]>*/
    </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/

  6. #5
    Join Date
    Apr 2015
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Beautiful! That is perfect.
    Thank you so much for doing this and so fast! That's very kind of you I really appreciate it! Bless your heart!

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
  •