PINCHZOOMer Responsive Image Grid Example

On most mobile version of websites, page zooming is usually disabled to get a mobile app feel on the website. With this setup, it is sometimes very hard to see images clearly. The example below shows how images can be zoomed without sacrificing the layout of the mobile site.
To use: On a touch device you can use pinch to zoom or double tap and drag to move the zoomed image. On a PC you can use mousescroll to zoom or double click and drag to move the zoomed image.
img1
img2
img3
img4
img5
img6
Below is the HTML and the default CSS used to generate the example above. By simply adding data-elem="pinchzoomer" in the img tag, the image now has multi-touch zoom capability. jQuery can also be used by adding $(".imageHolder img").pinchzoomer(); to your code.
HTML 
<div class="row-fluid">
   <div class="span4 imageHolder">
      <img src="assets/1.jpg" data-elem="pinchzoomer" alt="img1"/>
   </div>
   <div class="span4 imageHolder">
      <img src="assets/2.jpg" data-elem="pinchzoomer" alt="img2"/>
   </div>
   <div class="span4 imageHolder">
      <img src="assets/3.jpg" data-elem="pinchzoomer" alt="img3"/>
   </div>
</div>
<div class="row-fluid">
   <div class="span4 imageHolder">
      <img src="assets/4.jpg" data-elem="pinchzoomer" alt="img4"/>
   </div>
   <div class="span4 imageHolder">
      <img src="assets/5.jpg" data-elem="pinchzoomer" alt="img5"/>
   </div>
   <div class="span4 imageHolder">
      <img src="assets/6.jpg" data-elem="pinchzoomer" alt="img6"/>
   </div>
</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
{
   margin-top:10px;
   margin-bottom:10px;
   border:1px solid #CCC;
}