Performant Accessible Image Lightbox JavaScript Library – Zoomable Image

Category: Modal & Popup , Zoom | January 8, 2024
Author:fentosv
Views Total:80 views
Official Page:Go to website
Last Update:January 8, 2024
License:MIT

Preview:

Performant Accessible Image Lightbox JavaScript Library – Zoomable Image

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.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

You Might Be Interested In:


Leave a Reply