Inner Image Zoom

Demos

Basic

Simplest use case with only the src set.

Demo photo of stacked, patterned bowls
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.

Demo photo of a clothing store interior
<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.

Demo photo of a jigsaw puzzle
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.

Demo photo of breakfast foods
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.

Demo photo of shower products
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.

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

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.

Demo photo of three cocktails
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.

Demo photo of a vintage camera sitting on a desk
Demo photo of film canisters
Demo photo of a backpacker in the water
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>

Be the first to sponsor this project

And have your logo featured here

Sponsor