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',
      gallerySelector: null,
      docClose: true,
      swipeClose: true,
      scrollClose: true,
      threshold: 100,
      backFocus: true,
      transitionDuration: 300,
      transitionTimingFunction: 'cubic-bezier(0.2, 0, 0.2, 1)',
      reducedTransitionDuration: 0.1,
      lightboxIndicatorIcon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3"/></svg>',
      previousButtonIcon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path stroke="none" d="M0 0h24v24H0z"/><polyline points="15 6 9 12 15 18" /></svg>',
      nextButtonIcon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path stroke="none" d="M0 0h24v24H0z"/><polyline points="9 6 15 12 9 18" /></svg>',
      closeButtonIcon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M18 6L6 18M6 6l12 12"/></svg>',
      lang: 'en',
      i18n: {
        en: {
          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',
          previousButtonLabel: 'Previous image',
          nextButtonLabel: 'Next image',
          closeButtonLabel: 'Close dialog window'
        }
      },
      fileTypes: /\.(png|jpe?g|webp|avif|svg)(\?.*)?$/i
});

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

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

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

6. Create a gallery lightbox by grouping your images using the ‘data-group’ attribute or ‘gallerySelector’ option.

<a href="1.jpg" class="lightbox" data-group="Berlin">
  <img src="1.jpg" alt="">
</a>
<a href="2.jpg" class="lightbox" data-group="Berlin">
  <img src="2.jpg" alt="">
</a>
<a href="3.jpg" class="lightbox" data-group="Kassel">
  <img src="3.jpg" alt="">
</a>

7. More API methods.

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

// 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();

// go to the prev image
prvs.previous();

// go to the next image
prvs.next();

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:

v1.3.0 (04/24/2021)

• Gallery support
• Support for captions
• Support for responsive images
• Rename CSS variables

v1.2.2 (03/06/2021)

• Add internationalization
• Add error message for non supported image file types
• Add option for supported image file types

v1.2.1 (03/06/2021)

• Improve focus style
• Add setFocusToFirstItem function
• Improve getFocusableChildren function
• Add aria-modal attribute
• Add width and height to images
• Set scrollClose to false
• Add esm version
• Small improvements

02/06/2021

• Use rem instead of px