javascript - How can I create a photo slider on iPhone Safari with jQuery? - Stack Overflow

admin管理员组

文章数量:1303411

I'd like to create an product image viewer for an iPhone version of an emerce 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!

I'd like to create an product image viewer for an iPhone version of an emerce 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!

• javascript
• jquery
• iphone
• mobile-safari
• jqtouch

Share Improve this question Follow asked Dec 22, 2009 at 15:06 Ben CrouseBen Crouse 8,34855 gold badges3737 silver badges5151 bronze badges 2

• If you're building specifically for the iPhone, you may want to look into CSS animations instead. You get hardware acceleration in that case and thus the best performance. – bpapa Commented Dec 22, 2009 at 17:37
• Have you found a solution, Ben? Remember that it's perfectly okay to answers your own questions here on Stack Overflow. :) – Jan Aagaard Commented Mar 10, 2010 at 16:06

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

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.

not sure if you've solved this, but an iWebkit a user has created http://worldofsai./photos_flick.html - maybe you could base it on that?

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

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./p/jqextensions/downloads/list

It works very well.

本文标签： javascriptHow can I create a photo slider on iPhone Safari with jQueryStack Overflow