professional website design

5 Comments »

1. Comment by Eric J

   May 21, 2008

   

   Is there an easy implementation to make this class stop at both ends, when it reaches the ends. Both with the single and multiple movement?

   Well of course you could add a check where in the row the slider is positioned, and check whether a right/left scroll would scroll out over the end. On the left side handle for a single click this is already implemented, the right side should be done this way:

   if(leftClicks + 4 > scrollRange){
stepsLeft = (scrollRange - leftClicks)*imgWidth; // size to scroll right
start= this.leftClicks * this.imgWidth;
$(this.container).effect('right',{ duration: this.speed, wait:true, transition: Fx.Transitions.Back.easeIn }).start(start,stepsLeft);


   Guess this should work out, you only need to add this for the single click event and for the multiple click, just adjust the “4″ to the value you have been using for the scrollRange.

2. Comment by maco

   June 24, 2008

   

   pls how to exactly use this script from the comment to stop on the right side. because its not working.

3. Comment by admin

   June 24, 2008

   

   Actually I am too busy, but if you have some time and be patient, I’ll come up with a solution and post it here.

4. Comment by maco

   June 24, 2008

   

   Thanks I’ll be waitting. It’s very nice script, only this bug ..

5. Comment by Shashank

   June 28, 2008

   

   This works. Its not the most optimized but works well. All the 4 : the left, right, fast forward and rewind work.

   leftClick: function(){

   if(this.leftClicks > 0){
   var start= this.leftClicks * this.imgWidth;
   var end = ( this.leftClicks – 1 ) * this.imgWidth;
   $(this.container).effect(‘right’,{ duration: this.speed, wait:true, transition:Fx.Transitions.Back.easeIn }).start(start,end);
   this.leftClicks–;
   }

   },

   rightClick: function(){

   var start= this.leftClicks * this.imgWidth;
   var end = (this.leftClicks * this.imgWidth) + this.imgWidth;
   if(end < this.scrollRange) {

   $(this.container).effect(‘right’,{ duration: this.speed, wait:true, transition: Fx.Transitions.Back.easeIn }).start(start,end);
   this.leftClicks++;
   }
   },

   fastForward: function(){
   // scroll 4 images to the right, calculate it on base of the clicks and the image width
   var start= (this.leftClicks) * this.imgWidth;
   var end = (( this.leftClicks + 4 ) * this.imgWidth);
   if(end 0){
   var start= (this.leftClicks * this.imgWidth );
   if(this.leftClicks < 4){
   this.leftClicks = 4;
   }
   var end = ((this.leftClicks – 4 ) * this.imgWidth);
   $(this.container).effect(‘right’,{ duration: this.speed, wait:true, transition: Fx.Transitions.Back.easeIn }).start(start,end);
   this.leftClicks-= 4;
   }
   }

RSS feed for comments on this post. TrackBack URL

Leave a comment