panzoom

How to initially center an image inside inline-block container when using panzoom?

I want to set the initial position of the image as centered how can I do that? I don't want to do CSS centering as it will be applied always only at the first time I want the position to be set as centered of the container.

I need to keep the style #scene {display: inline-block;} or else the panning inside bounds breaks.

How can I center this image at load initially

    const element = document.querySelector('#scene');
    let panZoomController = panzoom(element, {
      bounds: true,
      boundsPadding: 0.1
    });
.image-outer-wrapper {
  border: 3px solid red;
  overflow: hidden;
  height: 500px;
}

img {
  cursor: move;
  display: flex;
  justify-content: center;
}

#scene {
  display: inline-block;
}
<script src="https://unpkg.com/panzoom@8.1.0/dist/panzoom.js"></script>
<div class="image-outer-wrapper">
  <div id="scene">
    <img src="https://www.probytes.net/wp-content/uploads/2018/01/5-1.png">
  </div>
</div>

Solution

  • You can use zoomAbs to set the initial position. The scale need to be different from 1 (not sure why) so I made it 0.9

    let element = document.querySelector('#scene');
var s = (document.querySelector('.image-outer-wrapper').offsetWidth - element.offsetWidth) ;


let panZoomController = panzoom(element, {
  bounds: true,
  boundsPadding: 0.1
}).zoomAbs(
  6*s, // initial x position
  0, // initial y position
  0.9 // initial zoom 
);
    .image-outer-wrapper {
  border: 3px solid red;
  overflow: hidden;
  height: 300px;
}

img {
  cursor: move;
}

#scene {
  display: inline-block;
}
    <script src="https://unpkg.com/panzoom@8.1.0/dist/panzoom.js"></script>
<div class="image-outer-wrapper">
  <div id="scene">
    <img src="https://www.probytes.net/wp-content/uploads/2018/01/5-1.png">
  </div>
</div>