jQuery panzoom panning issue

Question

this is what i have at the Moment:

<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/

If i drag the Image down the Image doesn't "stop" at the top of the Container. I can pull ít further down. It's hard to find the right words to describe it.

Here are two Screenshots:

http://uploadpie.com/Smez8

http://uploadpie.com/J2EAg

For any help i will be very gratefull!!

Answer 1

It's because your container is smaller than 50% your image, so it's impossible for the 'contain' function stop on centre as by defaults it's already passed centre.

Increase your container size to 800px / 800px and it should work closer to what is expected. Make size adjustments to your image and container to achieve the containment results you expect.

Answer 2

If I understood what you're trying to achieve, this might get you a little closer to what you're trying to do:

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

https://jsfiddle.net/ruc2y97r/

I think the contain option you're looking for is 'invert'. Hope that helps!