inner-image-zoom

A lightweight Vanilla JavaScript package for magnifying an image within its original container.

Demos | Changelog

Installation

NPM

npm install inner-image-zoom

Yarn

yarn add inner-image-zoom

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

JS

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

Option | 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 or drag | pan | The user behavior for moving zoomed images on non-touch devices. zoomType | click or 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. afterZoomIn | () => void | | Function to be called after zoom in. afterZoomOut | () => void | | Function to be called after zoom out.

Methods

• reinit - Reinitialize an InnerImageZoom instance with new options.
• uninit - Unitialize an InnerImageZoom instance.

Issues

Please submit bugs or requests on the GitHub issues page and make sure to use the vanilla label.

License

MIT