Jquery Mobile Pinch Zoom Image with Fixed Headers

Recently I came across the requirement to build a mobile app with image zooming capabilities. It needed to be something similar to what Twitter uses for displaying tweeted images. Twitter of course codes it using native iOS and Android APIs. My requirement was to do the same thing using jquery mobile so it would be easily cross platform. Lucky for me I came across an open source JQM plugin that allows for pinch zoom of images. With a few tweaks I managed to get this working with JQM. I load the image content dynamically in the 'pageshow' event so that the image content can be altered as required for the page.

Library for pinch zoom (uses html canvas)

https://github.com/rombdn/img-touch-canvas

Modified version with fixed headers for JQM

https://github.com/hariniachala/jqm-image-zoom/tree/master/www

Modify image and canvas parameters as required to suit your application requirement..