Updates
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.
5) Auto scrolling gesture gallery - Sometimes users may want a auto scrolling gallery along with the normal swipe gesture feature. I have a new post with a demo. Read it here.
6) Vertical swipe gesture - for a vertical swipe gesture gallery check out this post. It has a new demo and explanation on how to swipe the images in y-direction i.e up or down.
Now, back to the actual post -
Gesture Interaction – The JavaScript code
By looking at the java scriptcode you might have a question in your mind that this time I have used a different way of writing my javascript code. What I have done is that I have created a self calling function and I have defined an object (swipey) inside the function and finally exposed the object to the window object (window.swipeyObj = swipey) so that I can call the properties and methods of the swipey object anywhere after including the javascript file to our library. Ofcourse there are several other ways to execute the same, but this way it maintains the scope of the properties and methods of the object.
Let’s go straight to the swipey object which follows a JSON pattern. Inside the swipey object we have defined a series of properties and the methods. Think of it as a Class, but there are slight differences between a JSON Object and a Class. We will not go into that at the moment. The basic structure of swipey object is shown below,
var swipey = {
property1:value1,
property2:value2,
……………
method1:function(){},
method2:function(){},
……………
};
To access a property we write swipey.property1 and to call a method swipey.method1().Ok, that’s quite a brief description of a JSON object.Also, at most places I have provided comments for understanding. Now, the initSwipey() method defines some basic operations which is simple enough to understand. window.scrollTo(0, 1); is for hiding the address bar of the browser to give the app a native look. I have already talked about it in details in my earlier post, here. One thing to be noticed is the line below,
swipey.slideContainer.style.width = swipey.slides.length * swipey.preferredWidth + "px";
Continue reading →
26.135685
91.791780
