0

Hi I'm looking for a solution to make jScrollPane auto scroll on page load. I found some similar questions but they are not what I am looking for (scrollBy and scrollTo methods). I currently have the following:

$(function(){
$('.scroll-pane').jScrollPane({
showArrows: true,
autoReinitialise: true
});
});

What I want to achieve is to have my horizontal only jScrollPane scroll my contents (photographs) smoothly: 1. To the right by 300px, 2. Then scroll back to the left by 300px (back to the beginning), 3. And finally stop there.

It is also useful to have a setting that will allow me to control the smoothness/duration/interval of the scrolling.

In case you may be wondering what the use is, I wouldn't want any viewers to miss that they are supposed to scroll that area. You may view the website at: http://www.giamarescotti.com/v2/

Thank you very much in advance for any advice.

Regards, Dave

dave
  • 35
  • 3
  • 11

1 Answers1

1

JScrollPane supports animation. You need to add animateScroll and animateDuration (in milliseconds), use scrollToX to scroll to the width of the #imagesContainer and then back to 0:

$(function(){
  var pane = $('.scroll-pane');
  pane.jScrollPane({
    showArrows: true,
    autoReinitialise: true,
    animateScroll: true, //added
    animateDuration : 10000//added - length each way in milliseconds
  });

  var api = pane.data('jsp');

  //listen to the x-axis scrolling event
  pane.bind('jsp-scroll-x', function (event, pos_x, at_left, at_right) {
    //we're at the right now lets scroll back to the left
    if (at_right)
    {
      api.scrollToX(0);
      $(this).unbind(event);//added with edit
    }
  });

  //initial animate scroll to the right
  api.scrollToX(parseInt($('#imagesContainer').width()));
});
Jake
  • 2,471
  • 15
  • 24
  • Hi Jake, thank you for your advice. I replaced the script in the section to yours, and it indeed auto scroll. However it's not quite there yet as it isn't animating smoothly. It was sort of going back and forth madly before actually scrolling back to the first image. Only the last part was smooth. Is there any part of the code I should edit? I appreciate your help on this. You may view the result here: http://www.giamarescotti.com/v2/index-autoscroll.html Thank you very much. – dave Jul 17 '11 at 12:14
  • Oops, you also need to unbind the scroll event after it's finished for it to not continuously scroll back to the left. I updated the code to reflect that. If that's animation isn't good enough check out jQuery's animation documentation on easing to alter it. – Jake Jul 17 '11 at 18:34
  • Dear Jake, thank you for your time and help. It works better however not quite there yet. I've decided to go with another direction now. Thank you for your kind help! – dave Jul 18 '11 at 06:42