JQuery panzoom панорамирование вопрос

Question

это то, что у меня есть на данный момент:

<div id="container" style="width:400px;height:400px;overflow:hidden"> 
    <img id="panzoom" src="http://uploadpie.com/QBTlw"> 
</div> 

$(document).ready(function(){ 
    $("#panzoom").panzoom({ 
     increment: 0.1, 
     rangeStep: 0.1, 
     minScale: 1, 
     duration: 200, 
     exponential: true, 
     panOnlyWhenZoomed: false, 

     $zoomIn: $(".controls").find(".zoom-in"), 
     $zoomOut: $(".controls").find(".zoom-out"), 
     $zoomRange: $(".controls").find(".zoom-range"), 
     contain: 'automatic', 
     onPan : function() 
     { 


     } 
    }); 
}); 

https://jsfiddle.net/7yhjwLhf/6/

Если я перетащить изображение вниз изображение не «стоп» в верхней части контейнера. Я могу потянуть дальше. Трудно найти правильные слова, чтобы описать это.

Вот два скриншота:

http://uploadpie.com/Smez8

http://uploadpie.com/J2EAg

Для любой помощи я буду очень благодарен !!

Answer 1

Это потому, что ваш контейнер меньше 50% вашего изображения, поэтому функция «содержать» останавливается в центре, так как по умолчанию она уже передана по центру.

Увеличьте размер контейнера до 800px/800px, и он должен работать ближе к ожидаемому. Внесите корректировки размера в изображение и контейнер для достижения ожидаемых результатов сдерживания.

Answer 2

Если я понял, что вы пытаетесь достичь, это могли бы получить немного ближе к тому, что вы пытаетесь сделать:

(function() { 
    $('#panzoom').panzoom({ 
    startTransform: 'scale(5)', 
    increment: 0.1, 
    minScale: 1, 
    contain: 'invert' 
    }).panzoom('zoom'); 
})(); 

https://jsfiddle.net/ruc2y97r/

Я думаю, что содержит вариант вы» поиск - «инвертировать». Надеюсь, это поможет!