JavaScript、jquery.panzoom、jQuery : contain issue

Question

我真的很难让包含选项适用于 jquery.panzoom。

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

    });

请帮忙!

Answer 1

请尝试使用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);

});

这对我有用