Getting Started

Geist Pinch Zoom is a lightweight, performant, and simple pinch zoom component for Vue perfect for e-commerce sites.

Installation

npm i geist-pinch-zoom

Create a Pinch Zoom component

aspectRatio is a required prop to ensure the zoom viewport is setup correctly.

Simply divide image width by height to get the correct aspect ratio.

When dividing the image width by height, make sure to use the intrinsic image dimensions. This can be found in DevTools when inspecting the image.

<script setup lang="ts">
import { PinchZoom } from 'geist-pinch-zoom'
</script>

<template>
  <PinchZoom
    initialScale="auto"
    minScale="auto"
    :maxScale="3"
    :zoomTolerance="0.3"
    :aspectRatio="0.693"
  >
    <img
      :width="data.image.width"
      :height="data.image.height"
      :srcset="`
        ${data.image.url}&width=375,
        ${data.image.url}&width=750 2x,
        ${data.image.url}&width=1125 3x
      `"
      :sizes="`
        (min-width: 1024px) 35vw,
        100vw
      `"
      :src="`${data.image.url}`"
      :alt="data.image.altText"
      decoding="async"
    />
  </PinchZoom>
</template>

Examples

Full Screen

By default when you create a pinch zoom, the zoom viewport will be the height of the screen.

Restricted Height

If you want to restrict the zoom viewport height so that it's smaller and centered, just add max-height CSS property.

API Reference

interface PinchZoomProps {
  /**
   * how much the image should zoom on each double tap.
   */
  zoomTolerance?: number;
  initialScale?: 'auto' | number;
  minScale?: 'auto' | number;
  maxScale?: number;
  aspectRatio: number;
  onZoomChange?: (scale: number) => void;
}