Photo swipe script not working

I’m trying to make some pictures on a website “swipable” on mobile devices.

I’m new to javascript and jquery so I could have made any number of mistakes, though I’m not sure where.

(Note: this is similar to a question I posted yesterday, but I have changed quite a few things to make the following more understandable).

I have the following declared in my header (of course these files exist in their respective directories):

[code=html]<link rel=’stylesheet’ href=’http://www.hidden.com/css/jquery.mobile-1.3.2.min.css’>

<script src=’http://www.hidden.com/js/jquery.mobile-1.3.2.min.js’></script>[/code]

This is the way the images are linked right now:

[code=html]<div class=’main_image’>
<a href=’//www.hidden.com/projects/1_west-harbin-station-towers/9.html’ style=’display:block’>
<img src=’http://www.hidden.com/1250_Harbin/hidden_harbin towers9.jpg’ alt=’Interior Rendering from West Harbin Station Towers [hidden]’ style=’max-width:832px; max-height:500px’ title=’West Harbin Station Towers: Interior Rendering. click for next slide (Rendering). ‘>
</a>
</div>[/code]

This is the script I wrote, which goes right after:

[code=html]<script type=’text/javascript’>
jQuery(function(){
jQuery(‘div.main_image’).on(‘swipeleft’, swipeleftHandler);
jQuery(‘div.main_image’).on(‘swiperight’, swiperightHandler);

function swipeleftHandler(event){

JQuery.mobile.changePage(‘//www.spatialpractice.com/projects/1_west-harbin-station-towers/9.html’, {transition: ‘slideleft’, changeHash: false});
}

function swiperightHandler(event){
JQuery.mobile.changePage(‘//www.spatialpractice.com/projects/1_west-harbin-station-towers/7.html’, {transition: ‘slideright’, changeHash: false});
}
});
</script>[/code]

Right now, clicking on the images work, but it does not detect swiping. Any suggestions?

Also in #JavaScript _↴