Imagnify is a simple and lightweight library to add zoom functionality to images.

• Features
• Installation
• Usage
• Options
• License

Features

• Lightweight and simple to use
• Set higher resolution image for zoom
• Zoom to original size maintaining aspect ratio
• Customizable styles
• Responsive

Installation

NPM

npm install @m.dev/imagnify

CDN

<!-- Bundle -->
<script src="https://unpkg.com/@m.dev/imagnify"></script>

<!-- Or core and style separately -->
<script src="https://unpkg.com/@m.dev/imagnify/core"></script>
<script src="https://unpkg.com/@m.dev/imagnify/style"></script>

Usage

import imagnify from '@m.dev/imagnify'

imagnify()

The default package is a bundle that includes the core and the style. If you need, you can import them separately.

import imagnify from '@m.dev/imagnify/core'
import '@m.dev/imagnify/style'

Then, add data-zoom attribute to the images, unless another selector has been specified (see options).

<img src="image.jpg" data-zoom />

If you want to specify a higher resolution image for the zoom, you can set it as the value of the data-zoom attribute.

<img src="image.jpg" data-zoom="image-hd.jpg" />

Options

| Option | Type | Default | Description | | ---------- | ------ | ----------- | ----------------------------------------------------------------- | | selector | string | [data-zoom] | The selector for the images NodeList. | | background | string | 'white' | The background color for the overlay. Can be any valid CSS color. | | margin | number | 10 | The margin in pixels around the image. | | opacity | number | 0.8 | The opacity of the zoomed image. From 0 to 1. |

Example:

imagnify({
  selector: '.zoom-image',
  background: '#000',
  margin: 25,
  opacity: 0.5,
})

License

This project is licensed under the GPL-3.0-or-later license.