Geek Answers Handbook

How to create photo slider on iPhone Safari using jQuery?

I would like to create a product image viewer for the iPhone e-commerce site version and act like the Photos app.

Ideally, you can move images to move forward and backward in the product image gallery.

All this will be done in mobile Safari.

I experimented a bit with jqTouch, but it doesn't seem like it will support this idea (it has scroll support, but there is no explicit way to relate the moving image movement).

Any ideas on a plugin or implementation? Thanks!

+4
source share
4 answers

I needed the same thing, the solution was to use a cycle and scroll through the plugins:

"# gallery" is a container with all the 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 like a photo library, because images are not dragged to 50% of the width before changing. as in crmunro solution, but based on jQuery and plugins.

+2
source

not sure if you solved this, but iWebkit user created http://worldofsai.com/photos_flick.html - maybe you could base it on this

+1
source

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

0
source

Qtouch received a significant update in July. The complete source package now includes demos for embedding video and image galleries with drawing.

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

It works very well.

0
source

More articles:


All Articles