Media Plugin

GS Zoom

Butter-smooth hover zoom component with customizable scale grids, panning thresholds, and lightbox transitions.

Latest: v0.0.13

Downloads last month: 41

Visit Demo Website

Install Package

npm i @get-set/gs-zoom

or via CDN

<link rel="stylesheet" href="https://cdn.get-set.it/gs-zoom/latest/gs-zoom.min.css">
<script src="https://cdn.get-set.it/gs-zoom/latest/gs-zoom.min.js"></script>

Interactive Playground

Live Sandbox

Zoom.jsx

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

export default function App() {
  return (
    <Zoom
      type="lightbox"
    >
      <img
        src="/tech_banner.png"
        alt="Demo Image"
        data-gstitle="Futuristic Workspace"
        data-gssubtitle="Developer Environment"
        data-gszoomsrc="/tech_banner.png"
      />
    </Zoom>
  );
}

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

export default function App() {
  return (
    <Zoom
      type="lightbox"
    >
      <img
        src="/tech_banner.png"
        alt="Demo Image"
        data-gstitle="Futuristic Workspace"
        data-gssubtitle="Developer Environment"
        data-gszoomsrc="/tech_banner.png"
      />
    </Zoom>
  );
}

Live Preview

Click image to open Lightbox

Options

Configuration Values

Zoom Mode

Max Zoom ×

Autoplay Interval (ms)

Backdrop

Backdrop Opacity

Backdrop Blur (px)

Open Animation

Animation Duration (ms)

Theme

Accent Color

Reference Key

Feature Flags

Wheel ZoomNav ArrowsKeyboard NavigationThumbnail StripFilmstrip Open by DefaultImage CounterGlass ControlsSkip Fullscreen API

API Specifications

Option	Type	Default	Description
reference	string	auto	Unique registry 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.zoom	number	3	Zoom multiplier inside lens in magnifier mode.
magnifier.form	'circle'\|'square'	'circle'	Shape of the magnifier lens.
magnifier.size	number	150	Lens diameter/side in px.
responsive	ResponsiveOption[]	[]	Breakpoint overrides (sorted automatically).
data-gstitle	string	—	HTML Image Attribute: Title text shown below the image in lightbox.
data-gssubtitle	string	—	HTML Image Attribute: Subtitle text.
data-gsdescription	string	—	HTML Image Attribute: Description text.
data-gszoomsrc	string	—	HTML Image Attribute: Alternative high-res src for the magnifier.

Technical Features

Panning Vectors

Follows cursor movements smoothly across boundaries.

High-Res Swap

Injects high-resolution images dynamically on zoom.

Smooth Transitions

GSAP-driven easing curves for entering and exiting states.

Interactive Lightbox

Full screen overlay toggle with image details.

import Zoom from '@get-set/gs-zoom'; export default function App() { return ( <Zoom type="lightbox" > <img src="/tech_banner.png" alt="Demo Image" data-gstitle="Futuristic Workspace" data-gssubtitle="Developer Environment" data-gszoomsrc="/tech_banner.png" /> </Zoom> ); }

API Specifications

Option	Type	Default	Description
reference	string	auto	Unique registry 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.zoom	number	3	Zoom multiplier inside lens in magnifier mode.
magnifier.form	'circle'\|'square'	'circle'	Shape of the magnifier lens.
magnifier.size	number	150	Lens diameter/side in px.
responsive	ResponsiveOption[]	[]	Breakpoint overrides (sorted automatically).
data-gstitle	string	—	HTML Image Attribute: Title text shown below the image in lightbox.
data-gssubtitle	string	—	HTML Image Attribute: Subtitle text.
data-gsdescription	string	—	HTML Image Attribute: Description text.
data-gszoomsrc	string	—	HTML Image Attribute: Alternative high-res src for the magnifier.