Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Simple controls Noobslide -- HELP ME!!

    Hi,
    excuse I'm not a js coder..I need to control the end of a gallery made with mootools and noobslide (http://www.efectorelativo.net/laboratory/noobSlide/).

    I need the autoplay gallery to end in another way:

    Solution 1(difficult): After the last image, the gallery starts again from the first image without that "backward" effect. I'd like the first image to be placed after the last one, so the gallery loops without let the user know that it is starting again

    Solution 2 (easy, I suppose) : gallery stops at the last image

    Please HELP ME!!
    TY

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,495
    Thanks
    3
    Thanked 500 Times in 487 Posts
    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[*/
    
    #sample {
      position:relative;width:720px;height:180px;border:solid red 1px;
    }
    
    .mask1 {
     width:2240px;
    }
    .mask1 IMG {
     width:240px;height:180px;float:left;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    <div id="sample">
    	<div class="mask1">
     			<img src="http://www.efectorelativo.net/laboratory/noobSlide/img1.jpg" alt="Photo" />
    			<img src="http://www.efectorelativo.net/laboratory/noobSlide/img2.jpg" alt="Photo" />
    			<img src="http://www.efectorelativo.net/laboratory/noobSlide/img3.jpg" alt="Photo" />
    
    			<img src="http://www.efectorelativo.net/laboratory/noobSlide/img4.jpg" alt="Photo" />
    			<img src="http://www.efectorelativo.net/laboratory/noobSlide/img5.jpg" alt="Photo" />
    			<img src="http://www.efectorelativo.net/laboratory/noobSlide/img6.jpg" alt="Photo" />
    			<img src="http://www.efectorelativo.net/laboratory/noobSlide/img7.jpg" alt="Photo" />
    			<img src="http://www.efectorelativo.net/laboratory/noobSlide/img8.jpg" alt="Photo" />
    	</div>
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Slider (05-July-2011)
    // by Vic Phillips http://www.vicsjavascripts.org.uk/
    
    
    function zxcSlider(o){
     var oop=this,obj=document.getElementById(o.ID),slide=obj.getElementsByTagName('DIV')[0];
     slide.style.width='100000px';
     var clds=slide.getElementsByTagName('*'),lst=clds[clds.length-1],sz=lst.offsetLeft+lst.offsetWidth,nu=Math.ceil(obj.offsetWidth/sz)+1,slider=document.createElement('DIV'),z0=0,z1=0,ud=o.Direction,ms=o.AnimationDuration,events=o.AddEvents,auto=o.AutoStart;
     obj.appendChild(slider);
     obj.style.overflow='hidden';
     slider.style.position='absolute';
     slider.style.left='0px';
     slider.style.top='0px';
     slide.style.position='absolute';
     slide.style.top='0px';
     for (;z0<nu;z0++){
      slide=z0>0?slide.cloneNode(true):slide;
      slide.style.left=z0*sz+'px';
      slider.appendChild(slide);
     }
     clds=slide.childNodes;
     this.ary=[];
     for (;z1<clds.length;z1++){
      if (clds[z1].nodeType==1){
       this.ary.push(-clds[z1].offsetLeft);
      }
     }
     this.ary.push(this.ary[this.ary.length-1]+this.ary[1]);
     if (typeof(events)!='boolean'||events){
      obj.onmouseover=function(){ oop.Pause(); }
      obj.onmouseout=function(){ oop.Auto();  }
     }
     this.slider=slider;
     this.cnt=0;
     this.fr=0;
     this.to=0;
     this.run=true;
     this.ud=isFinite(ud)&&ud>0?1:-1;
     this.mS=isFinite(ms)&&ms<0?ms:500;
     this.hold=isFinite(o.Hold)?o.Hold:1000;
     if (typeof(auto)!='boolean'||auto){
      this.dly=setTimeout(function(){ oop.Auto(); },this.hold);
     }
    
    }
    
    zxcSlider.prototype={
    
     Next:function(ud,run){
      var ud=isFinite(ud)?ud>0?1:-1:this.ud,cnt=this.cnt,lgth=this.ary.length-1,nxt;
      if ((ud<0&&cnt==lgth)||(ud>0&&cnt==0)){
       cnt=ud<0?0:lgth;
      }
      nxt=cnt+(ud<0?1:-1);
      this.slide(cnt,nxt,run,ud);
     },
    
     GoTo:function(nxt){
      var cnt=this.cnt;
      if (cnt==this.ary.length-1){
       cnt=0;
      }
      this.slide(cnt,nxt,false);
     },
    
     slide:function(cnt,nxt,run,ud){
      if (this.fr==this.to&&nxt!=cnt&&isFinite(this.ary[nxt])){
       clearTimeout(this.dly);
       this.fr=this.ary[cnt];
       this.to=this.ary[nxt];
       this.cnt=nxt;
       this.run=run;
       this.ud=ud||this.ud;
       this.srttime=new Date().getTime();
       this.animate();
       document.cookie=this.nme+nxt+';expires='+(new Date(new Date().getTime()+this.days*86400000).toGMTString())+';path=/';
      }
     },
    
     Auto:function(){
      if (this.fr==this.to){
       var oop=this;
       this.dly=setTimeout(function(){ oop.Next(oop.ud,true); },500);
      }
     },
    
     Pause:function(){
      clearTimeout(this.dly);
      this.run=false;
     },
    
     animate:function(){
      var oop=this,ms=new Date().getTime()-this.srttime;
      this.slider.style.left=(this.to-this.fr)/this.mS*ms+this.fr+'px';
      if (ms<this.mS){
       setTimeout(function(){oop.animate(); },10);
      }
      else {
       this.fr=this.to;
       this.slider.style.left=this.to+'px';
       if (this.run){
        this.dly=setTimeout(function(){ oop.Next(oop.ud,true); },this.hold);
       }
      }
     }
    
    }
    
    new zxcSlider({
     ID:'sample',            // the unique ID name of the parent node.                                (string)
     Direction:-1,           //(optional) rotation direction, < 0 = anti-clockwise, > 0 = clockwise.  (number, default = -1);
     AnimationDuration:500,  //(optional) the animation duration in milli seconds.                    (number, default = 500);
     Hold:2000,              //(optional) the 'hold' delay between rotation in milli seconds.         (number, default = 1000);
     AutoStart:true,         //(optional) true = start auto rotation on initialization.               (boolean, default = true);
     AddEvents:true          //(optional) true = mouseover to pause, mouseout to start auto rotation. (boolean, default = true);
    });
    
    /*]]>*/
    </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
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow.. thank you indeed.. I'll try to inderstand this code.. mine is really easyer than yours.
    I suppose to use the "handle" and "walk" functions of noobslider (I have to use noobslider because the clients wants the image to be larger then container). This is our test link http://www.3820.it/3820_carosello.html. I hope I'll find out how to apply your code to my corousel.

    Thank you, indeed


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •