Simple swipe gallery with jQTouch javascript iphone / ipad

Roflcart picture Roflcart · Aug 24, 2010 · Viewed 19.2k times · Source

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

William Niu picture William Niu · Aug 24, 2010

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.