JQuery Mobile swipe between Pages like a gallery

Question

My App consists of different HTML5 Pages. I know how to swipe between them with JQuery Mobile. But I want something like a horizontal progress bar. So that the users knows that there a maybe 10 pages and he is a the beginning.

I know these gallery plugins. But I don't want to swipe images. I want to swipe the whole pages without any buttons.

I'll hope someone has an idea how to code something like that or has an example project for me.

Thanks!

Solution 1

http://jsfiddle.net/yxzZf/4/

I have implemented a jquery mobile swipe before, but it wasn't that smooth though. If your page is doing a post back it won't be that good. I'd recommend trying out this link. Very smooth transitions.

http://blogs.claritycon.com/blog/2011/07/building-a-touch-friendly-html5-site/ Example code is included.

This will be difficult on jQuery mobile. I would include this sample code inside of one jquery mobile page.

Solution 2

That would be easy to achieve if you use the native transition function as follow:

$('div.ui-page').live("swipeleft", function(){
   $.mobile.changePage( "target-page.html", {      
       transition: "slide", 
       reverse: false, 
       changeHash: false,
       reloadPage: true      
   });
 });