PINCHZOOMer Fullscreen Example

This example shows a fullscreen image with multi-touch zoom capability.
fullscreen link
Below is the HTML and the default CSS used to generate the fullscreen example. By simply adding data-elem="pinchzoomer" in the img tag, the image now has multi-touch zoom capability. Also set is the scaleMode:full which resizes the image to take the full size of its container. In this case, the whole screen. Another option is by using jQuery. Simply add $("img").pinchzoomer({imageOptions:{scaleMode:"full"}}); to your code.
HTML 
<div class="imageHolder"> 
	<img src="assets/1.jpg" data-elem="pinchzoomer" data-options="scaleMode:full;"/>
</div>
CSS 
.zoomInOn, .zoomInOff, .zoomOutOn, .zoomOutOff
{
   width:34px;
   height:34px;
   display:block;
   position:absolute;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

.zoomInOn, .zoomInOff
{
   background-image:url(../assets/zoom_in.png);
   top:10px;
   right:10px;
}

.zoomOutOn, .zoomOutOff
{
   background-image:url(../assets/zoom_out.png);
   top:52px;
   right:10px;
}

.zoomInOn, .zoomOutOn
{
   opacity:1;
   cursor:pointer;
}

.zoomInOff, .zoomOutOff
{
   opacity:0.3;
   cursor:auto;
}

.imageHolder
{
   width:100%;
   height:100%;
   min-height:100%;
   position:absolute;
}