如何使用jQuery在iPhone Safari上创建照片滑块？

Question

I'd like to create an product image viewer for an iPhone version of an ecommerce site, and have it behave something like the Photos app.

Ideally, you would be able to slide images to move back and forth in the product image gallery.

This will all be done in mobile Safari.

I did a little experimenting with jqTouch, but its doesn't look like it would support this idea (it has swipe support, but there's no apparent way to link sliding to dragging an image).

Any plugin or implementation ideas? Thanks!

Answer 1

i needed the same, solution was to use cycle and swipe plugins:

"#gallery" is a container with all img tags in it.

$(function() {
 $('#gallery').cycle({
  fx: 'scrollHorz',
  timeout: 0,
  next: '',
  prev: '',
  speed: 300,
  nowrap: 0
 });
});
$(function() {
 $('#gallery').swipe({
  swipeLeft: function() { $('#gallery').cycle("next"); },
  swipeRight: function() { $('#gallery').cycle("prev") },
  threshold: {
   x: 15,
   y: 99999
  },
  preventDefaultEvents: false
 });
});

it works, but not exactly like Photo library, because images doesnt drag to 50% of width before changing. just like in crmunro's solution, but based on jQuery and plugins.

Answer 2

不知道你是否已经解决了这个问题，但用户创建了一个iWebkit http://worldofsai.com/photos_flick.html - 也许你可以根据它来做？

Answer 3

you can check this example. open it in safari on your iPhone))) you can rotate, move and scale images

Answer 4

Qtouch received a significant update in july. The full source package now include demos for video embedding and swipeable image galleries.

You can find the download of r148 at this url: http://code.google.com/p/jqextensions/downloads/list

It works very well.