PINCHZOOMer Horizontal Scroll Example

This example shows a common layout mostly used in image portfolios. This plugin takes the scroller to another level by adding multi-touch gestures to zoom the image so the users will be able to appreciate the image better.
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. You can also use the zoom in/zoom out buttons. You can view other images by dragging the slider at the bottom of the images.
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. You can also use jQuery by adding $(".imageHolder img").pinchzoomer(); to your code.
HTML 
<div class="imageHolder">
   <img src="assets/1.jpg" data-elem="pinchzoomer"/>
</div>
<div class="imageHolder">
   <img src="assets/2.jpg" data-elem="pinchzoomer"/>
</div>
<div class="imageHolder">
   <img src="assets/3.jpg" data-elem="pinchzoomer"/>
</div>
<div class="imageHolder">
   <img src="assets/4.jpg" data-elem="pinchzoomer"/>
</div>
<div class="imageHolder">
   <img src="assets/5.jpg" data-elem="pinchzoomer"/>
</div>
<div class="imageHolder">
   <img src="assets/6.jpg" data-elem="pinchzoomer"/>
</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:50%;
   position:relative;
   margin-top:10px;
   margin-bottom:10px;
   display:inline-block;
   *display: inline;
   zoom: 1;
}

@media (max-width: 480px) 
{
   .imageHolder
   {
      width:100%;
      position:relative;
      margin-top:10px;
      margin-bottom:10px;
      display:inline-block;
   }
}