PinchZoomer

PinchZoomer is an easy to setup jQuery plugin for mobile and desktop that adds pinch to zoom / mouse scroll zoom function to your HTML content.

Pinch or mouse scroll to zoom

Features

HTML Examples

Image Only

This is basically just an image with and added data-elem="pinchzoomer" attribute. data-src is used instead of src to preload the image.
HTML 
<div class="zoomHolder">
   <img data-src="assets/easter_chick.jpg" data-elem="pinchzoomer"/>
</div>
CSS 
.zoomHolder
{
   width:100%;
   height:auto;
   position:relative;
   overflow:hidden
}

DIV with Images

This example shows how to use PinchZoomer using div. In this case it contains 2 layered images.
Rollover or mousedown/touch the layer name to highlight the layers.
Street Layer
Building Layer
HTML 
<div class="zoomHolder">
   <div data-elem="pinchzoomer">
      <img id="streetLayer" data-src="assets/street_layer.jpg" data-elem="bg" class="layerImg"/>
      <img id="buildingLayer" data-src="assets/detail_layer.png" class="layerImg"/>
   </div>
</div>
CSS 
.zoomHolder
{
   width:100%;
   height:auto;
   position:relative;
   overflow:hidden
}

.layerImg
{
   position:absolute;
   left:0px;
   top:0px;
   right:auto;
   bottom:auto; 
}

DIV with image and markers

This example shows how to use markers with PinchZoomer. This also shows how each marker's visibility can be toggled with different zoom levels.
Zoom to show more detailed markers.
HTML 
<div data-elem="transformPreset" data-options="id:cb; transformOrigin:50% 100%"></div>
<div class="zoomHolder"> 
   <div data-elem="pinchzoomer">
      <img data-src="assets/flower_and_bee.jpg" data-elem="bg"/>
      <img data-src="assets/bee_marker.png" class="marker" data-elem="marker" data-options="x:240; y:100; transformOrigin:cb; maxZoom:1.5"/>
      <img data-src="assets/flower_marker.png" class="marker" data-elem="marker"  data-options="x:450; y:260; transformOrigin:cb; maxZoom:1.5"/>
      <img data-src="assets/wings_marker.png" class="marker" data-elem="marker" data-options="x:250; y:100; transformOrigin:cb; minZoom:1.6"/>
      <img data-src="assets/legs_marker.png" class="marker" data-elem="marker"  data-options="x:300; y:165; transformOrigin:cb; minZoom:1.6"/>
      <img data-src="assets/disk_marker.png" class="marker" data-elem="marker" data-options="x:280; y:270; transformOrigin:cb; minZoom:1.6"/>
      <img data-src="assets/petal_marker.png" class="marker" data-elem="marker"  data-options="x:90; y:190; transformOrigin:cb; minZoom:1.6"/>
   </div>
</div>
CSS 
.zoomHolder
{
   width:100%;
   height:auto;
   position:relative;
   overflow:hidden
}
.marker
{
   position: absolute !important;
   left: 0px !important;
   top:0px !important;
   bottom: auto !important;
   right: auto !important
}

Other Examples