For years, I have been struggling with this issue and I have finally found a solution that works.
You can create multiple versions of an image in different sizes for zooming purposes. Using the show and hide function from Jquery found at W3Schools(ShowHide), you can easily manage displaying one image while hiding the other on tap.
Although it doesn't support pinch gesture zooming, this method is simple and effective for displaying detailed images using phonegap.
Here is how I implemented it using only JavaScript:
Add this script to the header:
<script type="text/javascript">
function enlarge() {
var elem = document.getElementById("enlargable");
if(elem.style.display == 'block')
elem.style.display = 'none';
else
elem.style.display = 'block';}
</script>
Call this function on the images in the body:
<small><a href="#" onClick="enlarge();"><img src="001.jpg" width="400" height="250" /></a></small>
<large id="enlargable" ><a href="#" onClick="enlarge();"><img src="001ZOOM.jpg" width="1280" height="800" /></a></large>
The enlarge function targets the Html element in the body with the id enlargable and toggles its display style (show or hide).
This function is triggered when clicking on either of the images. When tapping on small, the smaller image, it displays the large image which overlaps the small one. Tapping again will toggle the display, allowing the user to switch between views.