Touch-friendly Image Zoom JavaScript Library – Ironex Zoom

Preview:

Description:

An easy, tiny, mobile-compatible image zoom library that supports doubleclick, mousemove, mousewheel, doubletap, touchmove, and pinch events.

How to use it:

1. Install and import the Ironex Zoom with NPM.

# NPM
$ npm i zoom-by-ironex --save
import { zoom } from "zoom-by-ironex";

2. Or load the zoom-by-ironex.min.js library in the document.

<script src="js/zoom-by-ironex.min.js"></script>

3. Add an image to the zoom area.

<div class="zoom">
  <img src="zoom.jpg" alt="Image Alt" />
</div>

4. Apply a smooth transition effect to the image. OPTIONAL.

.zoom img{ 
  bottom: 0; 
  display: block; 
  left: 0; 
  margin: auto; 
  max-height: 100%; 
  max-width: 100%; 
  position: absolute; 
  right: 0; 
  top: 0;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.zoom-transition{
  transition: -moz-transform ease 200ms;
  transition: -ms-transform ease 200ms;
  transition: -o-transform ease 200ms;
  transition: -webkit-transform ease 200ms;
  transition: transform ease 200ms;
}

5. Initialize the library and done.

zoom();

6. Override the default CSS classes.

zoom({
  // CSS class added to the container when zoomed
  active: "zoom-active",
  // CSS class added to images when being animated
  transition: "zoom-transition",
  // Class added to images after loaded
  visible: "visible",
  // image container class
  zoom: "zoom"
})

7. Possible options to customize the image zoom library.

zoom({
  // CSS classes here
}, {
  // Used on doubleclick, doubletap and resize
  scaleDefault: 2, 
  // Used on wheel zoom
  scaleDifference: 0.5, 
  // Maximum zoom
  scaleMax: 10, 
  // Minimum zoom
  scaleMin: 1, 
  // Disable page scrolling when zooming
  scrollDisable: true,
  // This should correspond with zoom-transition transition duration
  transitionDuration: 200, 
  // Delay between clicks - used when scripts decides if user performed doubleclick or not
  doubleclickDelay: 300
})

8. Execute a callback function after the image has been zoomed.

zoom({
  // CSS classes here
}, {
  // options here
}, (function ($container, zoomed) {
  console.log(zoomed);
}))