Simple swipe gallery with jQTouch javascript iphone / ipad

Question

What I wish to achieve is have a simple gallery of images which the user can swipe through using jQTouch ( http://jqtouch.com )

<div id="container">
<img src="1.gif">
<img src="2.gif">
<img src="3.gif">
</div>

The images are quite long, for example 200px in width each. The container itself is 300px wide with hidden overflow.

What I wish to happen is when the user swipes the galley container, it drags the images to the left/right.

So far I have set up the container to receive swipe events and which direction it is in, however to be honest I have completely no idea where to go on from there.

Any advice appreciated.

Solution 1

Have you come across this demo?

"Photo Gallery" and "Photo Gallery 2" may be what you want. And if you just want to have photos and some captions, it should be fairly simple to setup:

jQT.generateGallery("pageID",
    [
    {src:"http://www.site.com/somepic.jpg"},
    {src:"pic1.jpg",caption:"Test Image 1"}
    ],
    {defaultIndex:1}
);

You'll need the the jQT photo extension: jqt.photo.js and jqt.photo.css.

Solution 2

Check out this lightweight mobile slider I just released. Swipe might be able to solve your problem :)