简单的滑动画廊与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.

Answer 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 .

Answer 2

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