Swipe Gestures With Jquery
Oct 25, 2011 | In jQuery, Tutorials |In this tutorial, I will explain how to create swipe gestures in Jquery, and use these gestures to create a simple image gallery.
We’ll do this tutorial in two parts: Part 1 will be how to actually figure out which way the mouse was moved, and Part 2 will be about how to use this to create a gallery.
Part 1
First, we’ll write some simple HTML.
<div id="status1"></div> <div id="status2"></div> <div id="dir"></div>
Before we can start the gallery, we’re going to have to build the fundamentals. Here’s how this works: On mouse click, the X position of the mouse is recorded into a the div “status1″. When the mouse is released(presumably in a different spot), the mouse’s coordinates are recorded into “status2″. This way, we can compare the two coordinates. Depending on which is larger, we can tell in which direction the mouse was moved. Then, the direction the mouse was moved is recorded into the “dir” div.
Now, we can write the javascript for the above logic.
$(document).ready(function(){
$(document).mousedown(function(e){
var mousePos1 = e.pageX;
$('#status1').html(mousePos1);
});
});
When the document is ready, create a “mousedown” handler. Using jquery’s “pageX” attribute, we find the mouse’s X position and put that into the “mousePos1″ variable. We then place the value of the variable into the “status1″ div. We do this so that we can later on extract the text inside the “status1″ div and compare that to the mouse’s position when it is released.
Now that we’re done with the “mousedown” function, we can create the “mouseup” function.
$(document).mouseup(function(e){
var mousePos2 = e.pageX;
$('#status2').html(mousePos2);
var status1 = $('#status1').text();
var status2 = $('#status2').text();
var dif = status2 - status1;
});
The variable “mousePos2″ contains the mouse’s X position. Then, we write the value of the variable into the “status2″ div. Once we have the 2 different positions of the mouse inside the two status divs, we can compare them. The “dif” variable is the difference between the second and first position. If the difference is positive, the mouse was moved towards the right. If the difference is negative, the mouse was moved to the left. Then, we place the direction into the “dir” variable. This isn’t actually necessary, but it’s nice to have some feedback.
if(dif>0){
var dir = 'right';
}
else{
var dir = 'left';
}
$('#dir').html(dir);
Well, if you did everything right up until this point, you should have three blocks of text at the top of your page. The first position, the second position, and the direction the mouse was moved in.
Part 2
Now, we can move on to the swipe-based gallery.
First off, we’ll need some simple HTML.
<div id="gallery"> <div id="slides"> <section class="slide" id="slide1"> <img src="images/test1.jpg"> </section> <section class="slide" id="slide2"> <img src="images/test2.jpg"> </section> <section class="slide" id="slide3"> <img src="images/test3.jpg"> </section> <section class="slide" id="slide4"> <img src="images/test4.jpg"> </section> <section class="slide" id="slide5"> <img src="images/test5.jpg"> </section> <section class="slide" id="slide6"> <img src="images/test6.jpg"> </section> </div> </div>
There’s a “gallery” div which contains all of the gallery content. The “slides” div contains all of the images, stacked side by side. Simple.
Now, we’ll style this a little bit.
body {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
background: #f8f8f8;
font-family: arial;
font-size: 15px;
line-height: 25px;
color: #515151;
}
#gallery {
margin: 0 auto;
margin-top: 50px;
overflow: hidden;
width: 640px;
height: 360px;
}
#slides {
width: 10000px;
}
.slide {
float: left;
}
The body has CSS3 user-select styles set to none so that users can’t select anything on the page. This is necessary so that when the user is dragging his mouse, nothing gets selected. Everything else is just simple gallery styling. The “gallery” div has a width, height, and overflow: hidden. The “slides” div inside the “gallery” div has a huge width, and each “slide” is floated to the left to be side by side.
At this point, we have everything we need to create the gesture-based gallery. Let’s get to work.
var pos = 0;
$(document).mouseup(function(e){
var mousePos2 = e.pageX;
$('#status2').html(mousePos2);
var status1 = $('#status1').text();
var status2 = $('#status2').text();
var dif = status2 - status1;
Notice the “pos” variable we’ve added right before the mouseup function. This is where the slideshow is currently at; the value of this variable will be changed each time the user swipes across the screen.
Now, we’ll have to write some functions that will animate the “slides”.
function slideToLeft(slidePos) {
$('#slides').animate({
marginLeft: '-' + slidePos,
});
}
A “slidePos” variable is passed to this function. This number has to be a multiple of 640, or else we’ll end up seeing 2 images at the same time.
function slideToRight(slidePos) {
$('#slides').animate({
marginLeft: slidePos,
});
}
This is the same exact thing, except without the negative sign before the “slidePos”.
Now that we have these two functions, we can modify the if…else statement to make the slideshow work.
if(dif>0){
var dir = 'right';
if(pos>0){
pos--;
}
else{
}
slideToLeft(640*pos);
}
else{
var dir = 'left';
var marginLeft = $('#slides').css('margin-left');
if(pos > 4){
}
else{
pos++;
slideToLeft(640*pos);
}
}
In the each section of the if…else statement, you’ll notice another if…else statement. The “if” clause inside the second if…else statement checks to see if the “pos” variable is too big or to small. If the position of the slideshow is too big or too small, it won’t be animated. Otherwise, we call on the “slideToLeft” or “slideToRight” functions. In the “else” clause of the second if…else statements, we increment the value of “pos” if the slides are moving to the left, and decrement it if the slides are moving to the right. Then, once the value of the “pos” variable has changed, we call the appropriate function. We then pass the value of 640 times the “pos” variable to the function, so that the “margin-left” of the slides is animated to the right position.
This tutorial was quite complicated, but the result is pretty great. That’s the end of this tutorial; Good luck and have fun!