CODEWITHSUNDEEP
javascriptmobileimage-gallerytouch-event
mmm
mmm

Reputation: 2297

Javascript image gallery for mobile

I want to make an image gallery for mobile with similar functionality to Flickr.

I'd like for it to move an image on touchmove depending on the direction your finger moves, and if you make a small swipe gesture, I'd like it to move the image all the way over, or if the swipe wasn't big enough, move the div back to its starting position on the x axis.

I know what the logic would look like, I'm just unsure of the syntax to use.

I think it'd be something like this:

On touchstart -Assign variable for x position of touchstart

On touchmove -Assign variable for x position of touchmove -assign a variable for touchmove minus touchstart - add (touchmove minus touchstart) to the current x position of a div

On touchend - if touchmove => touchstart + 50px then add 1000px - (touchmove-touchstart) to the divs x position

-else if touchmove =< touchstart - 50px then minus 1000px + (touchmove - touchstart) from the divs x position

Else Minus (touchmove - touchstart) from the x position of the div

Can anyone translate this^^^ to javascript?

Upvotes: 0

Views: 517

Answers (1)

Lydon
Lydon

Reputation: 2975

If you are really up to the challenge, there is a lot of things to consider. You will need to make it platform independent, decide whether to animate with JavaScript, CSS3 animations or a bit of both. It will need to be responsive and allow the images to be loaded on demand etc. What about backwards compatibility?

You will also need to work in some clever logic that doesn't just detect the distance between the touchstart and touchmove but also the speed this was done. For example the user could flick their finger a short distance very fast causing a transition to occur or could move their finger a long distance very slowly causing a transition to not occur (within limits).

So to answer your question, no this will not just animate by itself. It will not move smoothly without some clever and efficient JavaScript or CSS3 animations.

I would recommend using one of the MANY JQuery libraries that already exist to do this for you. There are a number of free libraries out there that work great. After a quick search I found this one:

http://www.photoswipe.com/, which seems to do exactly what you are trying to achieve.

Upvotes: 1

Related Questions