I am trying to use zoomooz + jquery.mouse.wheel and jquery.kinetic.js to implement a zoom in a free drag/scroll feature in a form designer. Here is a demo of the feature: http://jsfiddle.net/mVf8Z/
My problem is:
"reset" button cannot reset the state to the original one. It zoom in the container and shift it a little bit to upper right of the view port
when I zoom inside the container by using mousewheel, the container is able to zoom in, but it always shift away to the upper right conner of the view port
Any idea where my code is wrong?
Update
After adding an additional layer, it looks like the shift away issue is resolved, check http://jsfiddle.net/mVf8Z/3/. However, there are still 2 problems:
I cannot scroll the page to expected view port using jquery.kinetic drag/scroll. This is okay before zoom in happen
Clicking on reset button doesn't reset to the original state, instead it zoom out a little bit.
Update 2
I finally end up with a solution based on zynga scroller (http://zynga.github.com/scroller/). Here is the fiddle: http://jsfiddle.net/mVf8Z/5/. The problem of this solution is the zoom in effect is terrible compare to zoomooz. I have an issue submitted to zynga at https://github.com/zynga/scroller/issues/28