Get-Set Zoom

A lightbox & magnifier zoom plugin with drag, pinch, autoplay, fullscreen and keyboard navigation.
One codebase — builds both a vanilla JS bundle and a React component.

Build

npm install
npm run build

| Command | Output | Use for | |----------------------|-------------------------------|-------------------| | npm run build | both outputs below | everything | | npm run build:js | dist-js/bundle.js | vanilla JS / CDN | | npm run build:react| dist/components/GSZoom.js | React / npm |

Vanilla JS

<link rel="stylesheet" href="dist-js/GSZoom.css" />
<script src="dist-js/bundle.js"></script>

<!-- Lightbox on a collection -->
<div class="gallery">
  <img src="photo1.jpg" data-gstitle="Photo 1" />
  <img src="photo2.jpg" />
</div>

<script>
  new GSZoom(document.querySelectorAll('.gallery img'), {
    type: 'lightbox',
    arrows: true,
    navigateWithKeys: true,
    maxZoom: 5,
    autoplaySpeed: 4000,
    responsive: [
      { windowSize: 768, params: { arrows: false } },
    ],
    afterLightBoxOpen: () => console.log('opened'),
  });
</script>

jQuery and HTMLElement.prototype shortcuts are also available:

// jQuery
$('.gallery img').GSZoom({ type: 'lightbox' });

// Prototype
document.querySelector('img').GSZoom({ type: 'magnifier' });

React

The CSS is injected automatically when the component mounts — no manual stylesheet import needed.

import GSZoom from '@get-set/gs-zoom';

// Lightbox — collection mode (wrap multiple images)
<GSZoom type="lightbox" arrows navigateWithKeys maxZoom={5}>
  <img src="photo1.jpg" data-gstitle="Photo one" data-gssubtitle="Subtitle" />
  <img src="photo2.jpg" />
</GSZoom>

// Lightbox — single image mode
<GSZoom type="lightbox" src="photo1.jpg" data-gstitle="Photo one" />

// Magnifier
<GSZoom
  type="magnifier"
  src="product.jpg"
  magnifier={{ zoom: 4, form: 'circle', size: 180 }}
/>

Parameters

| Param | Type | Default | Description | |---------------------------------|-------------------------|---------------|--------------------------------------------------| | reference | string | auto | Unique key. Auto-generated if omitted. | | type | 'lightbox'\|'magnifier' | 'lightbox' | Plugin mode. | | arrows | boolean | true | Show prev/next arrow buttons. | | navigateWithKeys | boolean | true | Enable ← → keyboard navigation. | | showAdditionals | boolean | true | Show thumbnail strip in lightbox. | | zoomOnWheel | boolean | true | Zoom with mouse wheel. | | maxZoom | number | 5 | Maximum zoom multiplier. | | disableFullScreen | boolean | false | Prevent fullscreen API call on open. | | imgLoading | string | '' | HTML string shown while image loads. | | autoplaySpeed | number | 5000 | Autoplay interval in ms. | | mainImageQueryParameters | string | '' | Query string appended to main image src. | | additionalImageQueryParameters| string | '' | Query string appended to thumbnail src. | | magnifier | MagnifierParams | see below | Magnifier mode settings. | | responsive | ResponsiveOption[] | [] | Breakpoint overrides (sorted automatically). | | beforeInit | () => void | — | Callback before plugin initialises. | | afterInit | () => void | — | Callback after plugin initialises. | | beforeLightBoxOpen | () => void | — | Callback before lightbox opens. | | afterLightBoxOpen | () => void | — | Callback after lightbox opens. | | beforeLightBoxClose | () => void | — | Callback before lightbox closes. | | afterLightBoxClose | () => void | — | Callback after lightbox closes. | | afterChange | () => void | — | Callback after slide changes. |

MagnifierParams

| Prop | Type | Default | Description | |--------|--------------------|------------|-------------------------------| | zoom | number | 3 | Zoom multiplier inside lens. | | form | 'circle'\|'square' | 'circle' | Shape of the magnifier lens. | | size | number | 150 | Lens diameter/side in px. |

Image data attributes

| Attribute | Description | |--------------------|----------------------------------------------| | data-gstitle | Title text shown below the image in lightbox.| | data-gssubtitle | Subtitle text. | | data-gsdescription | Description text. | | data-gszoomsrc | Alternative high-res src for the magnifier. |