Accessible Mobile-friendly Image Lightbox Library – Parvus.js

Preview:

Description:

An accessible, touch-enabled, user-friendly image lightbox component written in plain JavaScript.

Features:

• Zoom in/out images on hover.
• Image loading indicator.
• Scroll or swipe to close just like Medium.com’s lightbox.
• Useful API methods and event handlers.

How to use it:

1. You can also install & download the package with NPM.

# NPM
$ npm i react-spinners-css

2. Add references to Parvus JavaScript & CSS files.

<link rel="stylesheet" href="dist/css/parvus.min.css" />
<script src="dist/js/parvus.min.js"></script>

3. Create a new instance of the Parvus.js and pass the options as follows:

const prvs = new parvus({
      // defaults
      selector: '.lightbox',
      lightboxLabel: 'This is a dialog window which overlays the main content of the page. The modal shows the enlarged image. Pressing the Escape key will close the modal and bring you back to where you were on the page.',
      lightboxLoadingIndicatorLabel: 'Image loading',
      swipeClose: true,
      scrollClose: true,
      threshold: 100,
      transitionDuration: 300,
      transitionTimingFunction: 'cubic-bezier(0.2, 0, 0.2, 1)'
});

4. Apply the image lightbox to an image element. That’s it.

<a href="full.jpg" class="image-lightbox">
  <img src="thumb.jpg" alt="Image Alt" />
</a>

imageSelector = document.querySelector('.image-lightbox');
prvs.add(imageSelector);

5. More API methods.

// remove an image element
prvs.remove(element);

// open the lightbox
prvs.open(el);

// close the lightbox
prvs.close();

// destroy the instance
prvs.destroy(destroy);

// check if is open
prvs.isOpen();

6. Bind/unbind event listeners.

// prvs.on(eventName, listener)
// prvs.off(eventName, listener)
prvs.on('open', listener);
prvs.on('close', listener);
prvs.on('destroy', listener);

Changelog:

02/06/2021

• Use rem instead of px