jquery - Pinch or mousewheel to zoom -

i need functionality demo: http://preview.codecanyon.net/item/pinch-zoomer-jquery-plugin/full_screen_preview/6623080

in desktops, image can zoomed in/out mouse wheel , on touch screen devices, 2 fingers gestures can used zoom in/out.

i use library mentioned, $6 seems bit much. did find other open-source libraries don't have both features.

i building static site dynamically (using javascript) loads single image.

to achieve desired result can use onmousewheel event and, when triggered, set change transform: scale(1, 1) of image based on the:

• e.wheeldelta (all browsers except firefox , opera) and
• e.detail (for firefox , opera).

when scroll down e.wheeldelta , e.detail negative valuesand when scroll positive.

example:

var image = image id; image.onmousewheel = function(e) {     var delta = e.detail || e.wheeldelta;     image.style.transform = (delta > 0) ? "scale(2, 2)" : "scale(0.5, 0.5)"; } 

you can of course create more complex function modifying scale based on exact delta value.