jquery.panzoom pan animate example

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

by mrjordy

HTML

<script src="http://filedb.experts-exchange.com/incoming/2013/06_w26/662697/jq.panzoom.js"></script>
<section>
<div class="Container">
    <div id="panzoom" style="text-align: center">asdf
        test
        <div class ="test2">
        
        </div>
        <a href="http://google.com">asdf</a>
    </div>
    </div>
</section>
 
    <button class="zoom-out">Zoom Out</button>
      <button class="zoom-in">Zoom In</button>
      <button class="reset">Reset</button>
<p> <a class="NavToFred">Navigate To Fred</a>

CSS

.Container {
  width: 500px;
  height: 500px;
  overflow: hidden;
}
#panzoom {
  height: 350px;
  width: 350px;
  overflow: hidden;
  border: 1px solid red;
}
.test2 {
  background: green;
  display: block;
  height: 12px;
  width: 22px;
}

JavaScript

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



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