Inner Image Zoom

Quickstart
1
Install
npm install inner-image-zoom
2
Import
import InnerImageZoom from 'inner-image-zoom';
3
Style
import 'inner-image-zoom/lib/styles.min.css'
4
Initialize
new InnerImageZoom()
5
Template
<img class="iiz" src="/path/to/image.jpg" />

Installation

NPM

npm install inner-image-zoom

Yarn

yarn add inner-image-zoom

CDN

<script src="https://cdn.jsdelivr.net/npm/inner-image-zoom@1.0.1/umd/index.min.js"></script>

TypeScript

Type declarations were added with version 1.0.0.

Styling

You can download the raw styles.css file or, if your build supports it, import the stylesheet directly from node_modules using:

import 'inner-image-zoom/lib/styles.min.css';

Usage

HTML

Initializing Inner Image Zoom requires an img tag and selector (either custom or the default iiz). The img tag can be standalone:

<img class="iiz" src="/path/to/image-2x.jpg" />

Or in a container:

<div class="iiz">
  <img src="/path/to/image.jpg" />
</div>

Options may be applied to specific instances using data attributes:

<div class="iiz" data-move-type="drag">
  <img src="/path/to/image.jpg" />
</div>

Any content within the container will be preserved. This is useful for responsive images or adding custom image spacers or loading states:

<picture class="iiz" data-zoom-src="/path/to/zoom-image.jpg">
  <source
    srcset="/path/to/large-image.jpg, /path/to/large-image-2x.jpg 2x"
    media="(min-width: 500px)"
  />
  <img
    srcset="/path/to/small-image.jpg, /path/to/small-image-2x.jpg 2x"
    src="/path/to/image.jpg"
  />
</picture>

JavaScript

Start by importing and initializing:

import InnerImageZoom from 'inner-image-zoom';

...

new InnerImageZoom();

You can also initialize with a custom selector or options object:

new InnerImageZoom('.selector', {
  zoomScale: 0.9,
  moveType: 'drag',
  hideCloseButton: true,
  hideHint: true
});

Options

Name	Type	Default	Description
zoomSrc	string		URL for the larger zoom image. Falls back to original image src if not defined.
zoomScale	number	1	Multiplied against the natural width and height of the zoomed image. This will generally be a decimal (example, 0.9 for 90%).
zoomPreload	boolean	false	If set to true, preloads the zoom image instead of waiting for mouseenter and (unless on a touch device) persists the image on mouseleave.
moveType	"pan" \| "drag"	pan	The user behavior for moving zoomed images on non-touch devices.
zoomType	"click" \| "hover"	click	The user behavior for triggering zoom. When using `hover`, combine with `zoomPreload` to avoid flickering on rapid mouse movements.
fadeDuration	number	150	Fade transition time in milliseconds. If zooming in on transparent images, set this to `0` for best results.
fullscreenOnMobile	boolean	false	Enables fullscreen zoomed image on touch devices below a specified breakpoint.
mobileBreakpoint	number	640	The maximum breakpoint for fullscreen zoom image when fullscreenOnMobile is true.
hideCloseButton	boolean	false	Hides the close button on touch devices. If set to true, zoom out is triggered by tap.
hideHint	boolean	false	Hides the magnifying glass hint.
className	string		Custom classname for styling the component.
afterZoomIn	() => void		Function to be called after zoom in.
afterZoomOut	() => void		Function to be called after zoom out.