Vanilla JS Library For Image Zoom And Pan

Preview:

Description:

Yet another vanilla JavaScript library that allows the user to zoom and pan an image within a specific container.

How to use it:

Insert your image into a zoom/pan container.

<div id="image-stage" class="image-stage">
  <div class="image-wrap">
    <img class="image" src="example.jpg" alt="">
  </div>
</div>

Add zoom in and zoom out controls to the image.

<div class="controls">
  <button id="control-in" class="control control-in"><img src="img/zoom-in.svg" alt="Zoom In"></button>
  <button id="control-out" class="control control-out"><img src="img/zoom-out.svg" alt="Zoom Out"></button>
</div>

The required CSS styles.

.image-stage {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: all 0.1s ease;
  cursor: zoom-in;
}
.image-stage img {
  width: 100%;
  transform: scale(1);
  transition: all 0.3s ease;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-drag: none;
}
.image-stage.zoom-in { cursor: -webkit-grab; }
.image-stage.zoom-in img { transform: scale(3); }
.controls {
  position: absolute;
  right: 2em;
  bottom: 2em;
  z-index: 2;
}
.controls button {
  display: block;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}
.controls button:focus, .controls button:active { outline: none; }
.control-in {
  opacity: 1;
  margin-bottom: 2em;
}
.control-out { opacity: .4; }
.image-stage.zoom-in + .controls .control-in { opacity: .4; }
.image-stage.zoom-in + .controls .control-out { opacity: 1; }

Place the needed JavaScript main.js at the end of the document.

<script src="js/main.js"></script>