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
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;
   }
}