@jojovms/lens-zoom-core

A lightweight, zero-dependency vanilla JS library to add a magnifying glass effect to images.

Installation

npm install @jojovms/lens-zoom-core

Usage

import { LensZoom } from '@jojovms/lens-zoom-core';

// Initialize on an image
// If targeting an IMG tag directly, it will be automatically wrapped in a container.
new LensZoom('#my-product-image', {
    zoom: 2,           // Zoom level (e.g., 2x)
    lensSize: 100,     // Diameter of the lens in pixels
    borderColor: '#333' // Color of the lens border
}).init();

Options

| Option | Type | Default | Description | |---|---|---|---| | zoom | number | 2 | Magnification level. | | lensSize | number | 100 | Diameter of the circular lens in pixels. | | lensColor | string | 'rgba(255, 255, 255, 0.4)' | Background color of the lens (glass effect). | | borderColor | string | '#000' | Border color of the lens. |

Methods

• init(): Sets up event listeners.
• cleanup(): Removes listeners and DOM elements.