Author: | victor-lillo |
---|---|
Views Total: | 33 views |
Official Page: | Go to website |
Last Update: | September 15, 2024 |
License: | MIT |
Preview:

Description:
Zoomable Image is a lightweight image zoom JavaScript library that allows web developers to easily create zoomed image modals with performance, flexibility, and accessibility in mind.
When an image gets clicked, it will open in a modal overlay at up to 100% of its original size.
The image modal features responsive scaling, keyboard/gesture/mousewheel controls, and customization options.
Making images zoomable improves usability for visually impaired users, promotes engagement, and showcases image details.
The small file size and optimized performance allow sites to enable zooming without sacrificing speed.
How to use it:
1. Install and import the zoomable-image.
# NPM $ npm i zoomable-image
import 'zoomable-image/dist/style.css' import { initZoomableImages } from 'zoomable-image';
2. Initialize the zoomable-image.
initZoomableImages()
3. Add the data-zoomable-image
attribute to the images as follows.
<img data-zoomable-image data-zoomable-hd="full-size.jpg" class="image" src="thumb.jpg" alt="Example Image" />
4. You can also initialize the zoomable image on specific images within the document.
const myImage = document.getElementById('example') zoomImage(example)
5. Specify the scroll distance to dismiss the image modal. Default: 150(px).
initZoomableImages({ scrollOffset: 200, })
Changelog:
v1.0.3 (09/15/2024)
- Update
v1.0.1 (01/08/2024)
- Add margin auto to modal for overriding CSS reset
v0.0.18 (12/13/2023)
- Improve image style reset
v0.0.17 (12/11/2023)
- Change focus to focus-visible and add it in media hover