0

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

MarkusHH
  • 153
  • 13

2 Answers2

0

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.

Mike
  • 1,436
  • 9
  • 16
  • But i Need 100% width of the Image. So the Image ends up left and right of browser window. Something like this: https://jsfiddle.net/7yhjwLhf/10/ – MarkusHH Aug 10 '16 at 14:13
  • Hm but now it isnt' draggable up and down. And not zoomable. – MarkusHH Aug 10 '16 at 14:29
0

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!

Giuseppe
  • 288
  • 2
  • 12
  • Ok but if the height is small i can't get to the bottom of the Image. Look here https://jsfiddle.net/ruc2y97r/1/ – MarkusHH Aug 10 '16 at 14:46
  • I believe that's just caused by not matching up the ratio of your image, try this: https://jsfiddle.net/auaskm90/ - see how I've set the container width and height to the same ratio as the original image... works fine. – Giuseppe Aug 10 '16 at 14:54
  • Yeah man we get closer. But the Image must always have 100%. So if i resize Browser or open Browser in 1000 x 500 Pixel i can't set correct ratio. In this case i want the Image to be displayed vertical in middle and i can drag it UP and DOWN. – MarkusHH Aug 10 '16 at 14:58