Tutorial #2, Picture gallery with swipe gestures, check out video!
Hello, my name is Alexander Voloshyn and today I'll show you how to create picture gallery where you can use swipe gesture for navigation.
To start you will need to download and install iPhone SDK version 2.2 or newer, you can obtain it on Apple's official developer page http://developer.apple.com/, when it's installed, download and install NimbleKit available on http://www.nimblekit.com/.
First thing you will need is to create new project from NimbleKit template, to do so just open Xcode application, click on "File"->"New Project" and chose "NimbleKit Application".
Now let's try to find out how we can capture swipe gesture. Standard webkit for iPhone supports touch events: "ontouchstart", "ontouchmove" and "ontouchend". So if we save initial position of first touch and compare to position when touch ended we can find the length and direction of gesture so if it's more then let's say 150 pixels we can consider that event as swipe gesture. OK, it's time to implement it!
<html>
<head>
<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no" />
</head>
<body ontouchmove="OnTouchMove(event);" ontouchstart="OnTouchStart(event);" ontouchend="OnTouchEnd(event);">
<script type="text/javascript" src="NKit.js"></script>
<script type="text/javascript">
var initialPosition = 0;
var lastPosition = 0;
function OnTouchStart(event)
{
var touch = event.touches[0];
initialTouchPosition = touch.pageX;
}
function OnTouchEnd(event)
{
var touch = event.touches[0];
if ((lastPosition-initialTouchPosition) > 150)
{
//swipe right
}
if ((initialTouchPosition-lastPosition) > 150)
{
//swipe left
}
}
function OnTouchMove(event)
{
var touch = event.touches[0];
lastPosition = touch.pageX;
}
</script>
</body>
</html>
Good, now we can say when it was swipe left or right, but how do we navigate from page to page? In NimbleKit version 1.3 we implemented NKMoveToPageAnimated(page, animation) function which will navigate to page specified using animation! So we will create second page with exactly same contents and when swipe detected we will navigate to second page loading previous or next picture. Let's change OnTouchEnd() function to following:
function OnTouchEnd(event)
{
var touch = event.touches[0];
if ((lastPosition-initialTouchPosition) > 150)
{
NKMoveToPageAnimated("main1.html?id="+(++id), "FastPushRight");
// in main1.html file change "main1.html" to "main.html" so the pages link to each other
}
if ((initialTouchPosition-lastPosition) > 150)
{
NKMoveToPageAnimated("main1.html?id="+(--id), "FastPushLeft");
// in main1.html file change "main1.html" to "main.html" so the pages link to each other
}
}
As you can see we added variable id to know which picture to load, every time the page is loaded it takes parameter from previous page.
Let's check if id is valid and limit amount of pictures to 4.
var id = NKGetParameter('id');
if (id>4)
id = 1;
if (id<1)
id = 4;
OK, now we have 2 pages which both can detect swipes and navigate to each other passing variable id to specify which image to load.
For simplicity I added 4 files to project (drag&drop on Groups&Files section) named "1.jpg", "2.jpg", "3.jpg", "4.jpg", so our variable id can be name of the file to show.
Now we need to add code for showing appropriate picture on every page:
document.write("<img width=\"200px\" height=\"300px\" src=\""+id+".jpg\">");
// here we create image and set source to our id plus file extension
That's it!, we have it working! You can download complete source code here
Please Login to respond