#hammer.js

Since I’m putting my prototype together using a web development approach, I needed to find a Javascript API that would allow me to leverage the various touch gestures on a mobile device. Enter Hammer.js. By downloading and implementing hammer.min.js I can use it to handle touch event detection and it will also streamline my writing touch interactive functions.

I made a virtual gallery website to exhibit my works with Processing language.

If you have interest, please check the link below:

Gallery Audrey

Tap to zoom & Swipe to navigate.

On mobile, enjoy fullscreen mode by Menu > Add to homescreen on browsers.

Hammer.js

Hammer helps you add support for touch gestures to your page, and remove the 300ms delay from clicks.

Use the original Hammer.js for gesture support,

and the all new Hammer Time for removing the 300ms delay

Hammer.js

Hammer helps you add support for touch gestures to your page, and remove the 300ms delay from clicks.

Use the original Hammer.js for gesture support,

and the all new Hammer Time for removing the 300ms delay

New Post has been published on http://www.htmluse.com/ap-image-zoom/

AP image zoom

Download   Demo

AP image zoom is a jQuery plugin for image zoom, based on hammer.js and jquery.mousewheel

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="css/ap-image-fullscreen.css" type="text/css" media="screen" /> <script src="js/jquery.min.js"></script> <script src="js/hammer.min.js"></script> <script src="js/jquery.mousewheel.min.js"></script> <script src="js/ap-image-zoom.js"></script>

2. HTML

<img src="images/pride-w'14-3_large.jpg" width="325" height="425" alt="dirndl" id="image" />

3. JAVASCRIPT

$('#image').apImageZoom( 'cssWrapperClass': 'custom-wrapper-class', );

4. OPTIONS

Was having trouble getting multi or single touch drag events to register on Motorola Xoom with Ice Cream Sandwich with Hammer.js.

Solution: needed to disable default browser events with the "prevent_default" option: