Replicating the iPhone Swipe Gesture – auto scrolling feature

This is an update to the Replicating touch swipe gesture javascript implementation series that I have been writing for some time now and this time I have tried out the auto scrolling feature. Sometimes users may want a auto scrolling along with the normal swipe gesture feature. This post will talk about it and the changes to code that were made to make it auto scroll. First let’s check out the demo, the demo runs in both computer webkit browsers and mobile webkit browsers.

Demo link: http://rialab.jbk404.site50.net/swipegesture/auto_scrolling/

Now, let’s talk on the implementation,
First the features of this demo-

  • Auto scrolling – the gallery slides change automatically at periodical times. Based on the requirement specify whether auto scroll stops on user interaction or continues.
  • Looping – the gallery loops and is circular.
  • Direction – supports two direction – left or right. Specify which direction the gallery should auto scroll.
  • Click/Tap to URL – click or tap to open URL’s.
  • Swipe gesture – and then the touch based swipe gesture for mobiles is available as well.

Code implementation
I will quickly walk through the changes that I have made to the code. I have picked up the code from my last post, so this code is the looping/circular gallery code and I have built on top of it. Let’s start.
Firstly, I have introduced some customization variables at the top of the script as shown below,

intervalObj:null,
autoInterval:3, //1-1000ms, 2-2000ms , customize as per your need
autoPlay:true,
autoDirection:"l", //l- left, r-right
pauseAutoPlayOnInteraction:true,

The variable names itself reveal their purpose and should be fairly easy for you to understand. But nevertheless let me start with the first one. intervalObj is the instance of the timer that I have used. I will talk about it later. autoInterval is the time interval between slide movement. I have comments against it, so should be self explanatory. Then I have autoPlay which determines whether the gallery should auto play when it loads. autoDirection specifies the direction of scroll. Only two have been possible for me till now. And then we have pauseAutoPlayOnInteraction which specifies whether we should stop the auto play when a user interacts with the gallery. A value of false for it does the opposite.
Now let’s see what other changes have been made. I have introduced a function that does the implementation logic.

auto: function() {
  if(swipey.autoPlay)
  {
    if(swipey.autoDirection)
    {
      switch(swipey.autoDirection)
      {
        case "l":
          swipey.intervalObj = setInterval(function(){
            swipey.moveLeft();
          },swipey.autoInterval*1000);
        break;
        case "r":
          swipey.intervalObj = setInterval(function(){
            swipey.moveRight();
          },swipey.autoInterval*1000);
         break;
       }
     }
   }
},

Note that the format that I have been using for writing my script follows the json object format where I have all my logic inside a custom object, mainly to prevent conflicting with other objects. You can see my previous post to find out more. Now coming back to the function, the logic implemented is very simple. I first check if autoPlay is true, and then check if autoDirection is defined and then based on the direction I create a time interval which calls the moveLeft() or the moveRight() functions periodically. This keeps on moving the slides. The script could have been written a little better than what I have. I will try to update when I refine it. But anyways, you can refine and use it.

Finally I have one more change. I have one more feature that I have talked of earlier in this post. So, you can set whether to stop the auto play after user interacts. I did introduce a variable for that – pauseAutoPlayOnInteraction. If this is set to true then when the user interacts with the image gallery it stops the autoplay. So this is implemented in the startHandler() event handler method. The following lines take care of it.

if(swipey.pauseAutoPlayOnInteraction)
{
  clearInterval(swipey.intervalObj);
  swipey.intervalObj = 0;
}

This is it, these many changes are enough to make the already swipeable gallery auto-play. I will definitely appreciate any suggestion for the implementation.

And here is where you can start with the swipe gesture series and begin: https://jbkflex.wordpress.com/2012/01/09/replicating-the-swipe-gesture-iphone-gallery-for-mobile-web-html5-part-1/

I will soon post the code in my Google code SVN base.

Updates/Related posts

1)  Flickering issue in iPhone/iPod solved.
After the swipey demo was done I was observing a strange flickering issue of the images. If you see the demo link in an iPhone or iPod’s mobile safari browser you would notice it. Test case – swipe the images to the left and you would notice a black flicker on the right side of the browser for a brief moment. This is happening when you swipe all the image for the first time. Second time on wards it is not being seen. Finally I could solve the issue and made a small post on it with the new fixed demo. You can find it here.

2) Images linked to URL – Now you can click or tap on the images to go to a URL. I have made a new post which describes the changes made. This was requested by one of the reader. I felt the importance of having the ability to link the images to URL so came up with an extension of this post. You can fine the post here. There is a demo and also a download link.

3) Common code and example for mobiles and computer browsers – I have developed a common universal code for mobile browsers and computer browsers. Note that when I am saying browsers I mean web-kit browsers – Chrome & Safari in computers, and then the default web browsers in iOS and Android mobiles. The major changes are in the javascript code, where I have automated the user event handling process. What this means is that for mobile devices touch based events are registered and listened to and then for computer browsers mouse based events are registered and handled by the script automatically. This way there is no need to hard code touch events for mobiles and mouse events for computers. The same code works everywhere. Find the post here. There is a demo and also a download link.

4) Circular swipe gesture gallery – I have a new tutorial where I have talked about a circular swipeable gallery. So the images keep on looping. The tutorial also includes a new demo. Read it here.

2 thoughts on “Replicating the iPhone Swipe Gesture – auto scrolling feature

  1. Very good! My congratulations… It’s what I was looking for. Tell me, please, is there a way to implement all the features of this code to the ios coverflow code? Regards

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s