2015-03-31 78 views
1

我真的很挣扎包含选项为jquery.panzoom工作。Javascript,jquery.panzoom,jQuery:包含问题

https://github.com/timmywil/jquery.panzoom

无论出于何种原因,我无法在整个包含DIV的整个区域拖动图像。这是我使用的一个样本。

http://dev.specialopswatch.com/products-page/predators/silver-predator/

标记:

<section id="contain"> 

     <div class="panzoom-parent" style="overflow: hidden; position: relative;"> 

      <img class="panzoom" src="http://dev.specialopswatch.com/wp-content/uploads/2014/06/SILVER-PREDATOR-400x4001.png" width="400" height="400" style="transform: matrix(0.5, 0, 0, 0.5, 0, 5); backface-visibility: hidden; transform-origin: 50% 50% 0px; cursor: move; transition: none; -webkit-transition: none;"> 

     </div> 

    </section> 

的Javascript:

jQuery(document).ready(function($) { 

     $section = $("#my-zoom"); 
     var $panzoom = $section.find('.panzoom').panzoom({ 
      $zoomIn: $section.find(".zoom-in"), 
      $zoomOut: $section.find(".zoom-out"), 
      $zoomRange: $section.find(".zoom-range"), 
      $reset: $section.find(".reset"), 
      startTransform: 'scale(0.95)', 
      maxScale: 1.3, 
      increment: 0.1, 
      contain: true,      
     }).panzoom('zoom', true); 

    }); 

请帮帮忙!

回答

0

请尝试使用disablePan: false

jQuery(document).ready(function($) { 
    $section = $("#my-zoom"); 
    var $panzoom = $section.find('.panzoom').panzoom({ 
     $zoomIn: $section.find(".zoom-in"), 
     $zoomOut: $section.find(".zoom-out"), 
     $zoomRange: $section.find(".zoom-range"), 
     $reset: $section.find(".reset"), 
     startTransform: 'scale(0.95)', 
     maxScale: 1.3, 
     disablePan: false, 
     increment: 0.1, 
     contain: true,      
    }).panzoom('zoom', true); 

}); 

这对我的作品