Demos

Basic

Simplest use case with only the src set.

CodeSandbox:
react
vanilla
vue

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

<InnerImageZoom
  src="/path/to/image.jpg"
  zoomSrc="/path/to/zoom-image.jpg"
  moveType="drag"
/>

Zoom on Hover

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

CodeSandbox:
react
vanilla
vue

<InnerImageZoom
  src="/path/to/image.jpg"
  zoomSrc="/path/to/zoom-image.jpg"
  zoomType="hover"
  zoomPreload={true}
/>

Fullscreen on Mobile

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

CodeSandbox:
react
vanilla
vue

<InnerImageZoom
  src="/path/to/image.jpg"
  zoomSrc="/path/to/zoom-image.jpg"
  fullscreenOnMobile={true}
/>

No Mobile Close Button

Hide the close button on touch devices.

CodeSandbox:
react
vanilla
vue

Demo photo of a Le Creuset pot and carrots

<InnerImageZoom
  src="/path/to/image.jpg"
  zoomSrc="/path/to/zoom-image.jpg"
  hideCloseButton={true}
/>

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

<InnerImageZoom
  src="/path/to/image.jpg"
  zoomSrc="/path/to/zoom-image.jpg"
  imgAttributes={{
    srcSet: '/path/to/small-image.jpg, /path/to/small-image-2x.jpg 2x'
  }}
  sources={[{
    srcSet: '/path/to/large-image.jpg, /path/to/large-image-2x.jpg 2x',
    media: '(min-width: 768px)'
  }]}
/>

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

import { useEffect } from 'react';
import LazyLoad from 'vanilla-lazyload';

...

useEffect(() => {
  new LazyLoad({ elements_selector: '.iiz__img' });
}, []);

...

<InnerImageZoom
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="
  zoomSrc="/path/to/zoom-image.jpg"
  imgAttributes={{
    '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

<Swiper>
  <SwiperSlide>
    <InnerImageZoom
      src="/path/to/image-1.jpg"
      zoomSrc="/path/to/zoom-image-1.jpg"
      fullscreenOnMobile={true}
    >
  </SwiperSlide>
  <SwiperSlide>
    <InnerImageZoom
      src="/path/to/image-2.jpg"
      zoomSrc="/path/to/zoom-image-2.jpg"
      fullscreenOnMobile={true}
    >
  </SwiperSlide>
  <SwiperSlide>
    <InnerImageZoom
      src="/path/to/image-3.jpg"
      zoomSrc="/path/to/zoom-image-3.jpg"
      fullscreenOnMobile={true}
    >
  </SwiperSlide>
</Swiper>