CMTA-jquery.panzoom pan animate example-v02

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

by freedawirl

HTML

<script src="http://timmywil.github.io/jquery.panzoom/dist/jquery.panzoom.js"></script>
<section>

    <div id="panzoom" style="text-align: center">
        <img src="http://portfolio.macmccrary.com/downtown-map.gif" width="2589" height="3150">
    </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;
    float: left;
margin: 0 ;
width: 100%;

 
      }
      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;
      }
.zoom-range{position: fixed;
          bottom: 35px}

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