Swiping through photo stack like Tinder - Cross-platform (Hybrid / HTML5 is OK)

Question

I'm looking to create an app like Tinder where users swipe through a photo stack. Does anyone know of a way to reproduce this effect cross-platform? So far, I'm thinking of building a web app using jQuery Mobile with

TouchSwipe for swipe detection; see: http://labs.rampinteractive.co.uk/touchSwipe/demos/

and jStack to display the images; see: http://lab.hisasann.com/jStack/

Are there any suggestions of a better way to do this?

Seclusion

I was also looking for a plugin for a long time, in the end I just fullscreened an image and used the swipeLeft / swipeRight events and page transitions to make it usable. It's not "better" but it's a very simple and fast method. – Vestment

Cybrox, that sounds great! Do you have some example code of this that you could share? – Loux

Answer 1

Here is a jQuery Plugin for that:

jTinder

Quadruplex

Answer 2

I've finally found a hack that does something like what I described in the question:

Using the touchpunch library (http://touchpunch.furf.com) for drag and drop, full-screen images, and drop zones to the right and to the left seems to do the trick.

Seclusion

Any chance you have a demo URL to check out? I've been trying to do the same effect. Thanks – Eaves

I'm the one who posted this question and I've still not heard of any "proper" solution to this. If anyone knows of one, please post it here. – Seclusion

Share jsfiddle please! – Counterespionage

Answer 3

Check out Swing JS : https://github.com/gajus/swing

and for angular: https://github.com/gajus/angular-swing

see this thread also: Tinder style drag gesture and drop with Javascript?

Foreshank

Answer 4

Hope it isn't too late to post a suggestion. So, hammerjs allows to listen to multitouch and gesture events. And supports Android, iOS and Windows Phone.

http://eightmedia.github.io/hammer.js/

Can try calling the photostack control's next/previous step based on the gesture event?

Equinoctial

Not too late at all! Thanks for the suggestion. One of the things that makes Tinder's UI special is that it's not the gesture that gets sensed, but where the picture gets dropped. This allows for hesitation and back-and-forth from the user, which is important when potentially choosing someone to date :) – Seclusion