PanZoom + Pinch Gestures

Project for Phonegap to screensize with pinch toe.

by Cristofer Sousa

HTML

<script src="https://github.com/timmywil/jquery.panzoom/blob/master/src/panzoom.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://github.com/timmywil/jquery.panzoom/blob/master/src/pointertouch.js"></script>
    <div class="box">
      <div class="box-photo">
          <img id="panzoom" src="http://mlb-s1-p.mlstatic.com/relogio-masculino-excursion-reserve-gold-frete-gratis-557501-MLB20348928156_072015-F.jpg" width="80%">
          
            </div>
        <div class="box-describe">
          <div class="box-white">
            <span class="text-orange">(Novo)</span>
            <h2>RELĂ“GIO MONDAINE</h2>
            <p> <a href="https://github.com/timmywil/jquery.panzoom" targert="_blank">Acessar PanZoom - Github</a></p>         
          </div>
          
          <ul>
            <li> Add <a href="https://github.com/timmywil/jquery.panzoom/blob/master/src/pointertouch.js" target=_blank>Panzoom.js</a></li>
            <li> Add <a href="https://github.com/timmywil/jquery.panzoom/blob/master/src/pointertouch.js" targer="_blank">pointertouch.js</a></li>
            
          </ul>
            
        </div>

      </div>

CSS

body{background-color:#bdc3c7;}

.box{
  width:100%;
  height:100%;
  display:table;
}

.box-describe{
    width:49%;
    height:100vh;
    float:left;
    letter-spacing: 1px;
    padding-left:5px;
    background:#ecf0f1;
}

.box-white{
  background: #2c3e50;
  color:#eee;
  padding-top: 10px;
  padding-left: 10px;
  padding-bottom: 10px;
}

a{color:orange;
  text-decoration:none;
  }


.box-white button{
  padding: 5px;
  background:orange;
  float: right;
  margin-right: 10px;

}
.box-photo {
    width:49%;
    float:right;
}

@media(min-width: 319px) and (max-width:532px){
  .box{
    width:100%;
    height:100vh;
    background-color:red;
  }

  .box-photo img{
    width:100%;
    min-height: 80%
    clear: both;

  }

  .box-describe{
      width:100%;
      letter-spacing: 1px;
      padding-left:5px;
  }
}

@media(min-width: 533px) and (max-width:801px){
  .box-photo {
      width:100%;
  }

  .box-photo img{
    min-width: 40%;
  }

  .box-describe{
      min-width:100%;
      letter-spacing: 1px;
      padding-left:5px;
  }
}

JavaScript

$("#panzoom").panzoom({
         increment: 1,
          minScale: 1,
          maxScale: 5
        });