Demos

Basic

Simplest use case with only the src set.

CodeSandbox:
react
vanilla
vue

new InnerImageZoom();

...

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

With Loading Spacer

Creates a loading spacer, based on an aspect ratio generated by the width and height, to prevent cumulative layout shift.

CodeSandbox:
react
vue

<InnerImageZoom
  src="/path/to/image.jpg"
  zoomSrc="/path/to/zoom-image.jpg"
  width={750}
  height={500}
  hasSpacer={true}
/>

Drag to Move

Drag to explore the zoomed image on both touch and non-touch devices.

CodeSandbox:
react
vanilla
vue

new InnerImageZoom('.iiz', {
  moveType: 'drag'
});

...

<img class="iiz" src="/path/to/image.jpg" data-zoom-src="/path/to/zoom-image.jpg" />

Zoom on Hover

Trigger the image zoom on hover on non-touch devices.

CodeSandbox:
react
vanilla
vue

new InnerImageZoom('.iiz', {
  zoomType: 'hover',
  zoomPreload: true
});

...

<img class="iiz" src="/path/to/image.jpg" data-zoom-src="/path/to/zoom-image.jpg" />

Fullscreen on Mobile

The zoomed image appears in a fullscreen modal on touch devices below a specified breakpoint.

CodeSandbox:
react
vanilla
vue

new InnerImageZoom('.iiz', {
  fullscreenOnMobile: true
});

...

<img class="iiz" src="/path/to/image.jpg" data-zoom-src="/path/to/zoom-image.jpg" />

No Mobile Close Button

Hide the close button on touch devices.

CodeSandbox:
react
vanilla
vue

Demo photo of a Le Creuset pot and carrots

new InnerImageZoom('.iiz', {
  hideCloseButton: true
});

...

<img class="iiz" src="/path/to/image.jpg" data-zoom-src="/path/to/zoom-image.jpg" />

Responsive Images

Loads responsive images based on screen size. Accepts default srcset and sources (with srcset, media, type).

CodeSandbox:
react
vanilla
vue

Demo photo of incense and essential oils on a table

new InnerImageZoom();

...

<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>

With Lazy Load

Lazy loads the image to improve page speed. This example uses vanilla-lazyload but vue3-lazyload should work as well.

CodeSandbox:
react
vanilla
vue

new InnerImageZoom();
new LazyLoad();

...

<img
  class="iiz lazy"
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="
  data-src="/path/to/image.jpg"
/>

With Swiper

Zoom in on photos in a Swiper carousel. To avoid any conflicting touch events, recommended with fullscreenOnMobile.

CodeSandbox:
react
vanilla
vue

Demo photo of a vintage camera sitting on a desk

new InnerImageZoom('.iiz', {
  fullscreenOnMobile: true
});

...

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img class="iiz" src="/path/to/image-1.jpg" data-zoom-src="/path/to/zoom-image-1.jpg" />
    </div>
    <div class="swiper-slide">
      <img class="iiz" src="/path/to/image-2.jpg" data-zoom-src="/path/to/zoom-image-2.jpg" />
    </div>
    <div class="swiper-slide">
      <img class="iiz" src="/path/to/image-3.jpg" data-zoom-src="/path/to/zoom-image-3.jpg" />
    </div>
  </div>
</div>