jquery.panzoom pan animate example

Shows how to use different area options, and handling special events

by goldfingerxyz

HTML

<script src="http://filedb.experts-exchange.com/incoming/2013/06_w26/662697/jq.panzoom.js"></script>
<section>
     <h1>Panning and zooming with CSS3</h1> 
    <div id="panzoom" style="text-align: center">
        <img src="http://blog.millermedeiros.com/wp-content/uploads/2010/04/awesome_tiger.svg" width="900" height="900">
    </div>
</section>
<section class="buttons">
    <button class="zoom-in">Zoom In</button>
    <button class="zoom-out">Zoom Out</button>
    <input type="range" class="zoom-range">
    <button class="reset">Reset</button>
</section>
<p> <a class="panLeft">&lt;</a>
 <a class="panRight">&gt;</a>

</p>

CSS

section {
          text-align: center;
          margin: 50px 0;
      }
      a.panLeft {
          position: fixed;
          left: 0;
          background: #eee;
          color: #000;
          font-weight: bold;
          font-size: 50px;
          padding: 20px;
          text-align: center;
          top: 40%;
          float: left;
          cursor: pointer;
      }
      a.panRight {
          position: fixed;
          right: 0;
          background: #eee;
          color: #000;
          font-weight: bold;
          font-size: 50px;
          padding: 20px;
          text-align: center;
          top: 40%;
          float: left;
          cursor: pointer;
      }
      a.panLeft:hover, a.panRight:hover {
          background: #ffeeee;
      }
      button {
          position: fixed;
          bottom: 10px;
      }

JavaScript

$("#panzoom").panzoom({
          $zoomIn: $(".zoom-in"),
          $zoomOut: $(".zoom-out"),
          $zoomRange: $(".zoom-range"),
          $reset: $(".reset")
      });

      $('.left').click(function () {
          $("#panzoom").panzoom("goTo", true);
      });

      $('.right').click(function () {
          $("#panzoom").panzoom("resetPan", true);
      });

      $('.panLeft').click(function () {
          $("#panzoom").panzoom("pan", -250, 0, {
              relative: true,
              animate: true
          });
      });

      $('.panRight').click(function () {
          $("#panzoom").panzoom("pan", 250, 0, {
              relative: true,
              animate: true
          });
      });