0

I'm trying to use jQuery.panzoom.js. All I have is a container with a fixed width (which might be smaller than the svg inside it). The problem is that if the svg is bigger than than the width of the container you cannot see the whole of it (even when you try to "pan it").

The html: 

<div class="container">
  <div id="parent">
    <div class="panzoom">
      <img src="http://blog.millermedeiros.com/wp-content/uploads/2010/04/awesome_tiger.svg" />
    </div>
  </div>
</div>

CSS:

.container {
  width: 600px;
  margin: 0 auto;
  border: 1px solid red;
}

#parent {
  border: 1px solid black;
}

.panzoom { width: 100%; height: 100%; }

And the javascript (as provided in the demos of this plugin):

 (function() {
   var $section = $('#parent');
   $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(1.1)',
     increment: 0.1,
     minScale: 1,
     contain: 'invert'
   }).panzoom('zoom');
 })();

Here's a working demo, reproducing the problem: http://codepen.io/FakeHeal/pen/WreLyZ

Ivanka Todorova
  • 9,964
  • 16
  • 66
  • 103

1 Answers1

1

You have to set the Dimension of the .panzoom class the same size as your image. So i expect your image is 600px in with and has a height of 900px use this css part

CSS-File

.panzoom { 
   width: 600px; 
   height: 900px; 
}
kasoft
  • 456
  • 6
  • 19
  • This is correct. You currently have your width and height of the "pannable" space set to `100%`. Adding the actual image dimension (being larger than the parent) will allow you to scroll through the "pannable" area within the confines of the parent. – EoghanTadhg Oct 20 '16 at 20:15