Press "Enter" to skip to content

An Accessible and Responsive Image Lightbox Library | Parvus

Parvus is a simplified, accessible, open-source image lightbox component and an easy-to-use graphic display component is written in regular JavaScript.

How to make use of it:

1. You may also set up & download the package with 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 brand new instance of the Parvus.js and move the choices as follows:

const prvs = new parvus({
      // defaults
      selector: '.lightbox',
      lightboxLabel: 'Add Content Here',
      lightboxLoadingIndicatorLabel: 'Image loading',
      swipeClose: true,
      scrollClose: true,
      threshold: 100,
      transitionDuration: 300,
      transitionTimingFunction: 'cubic-bezier(0.2, 0, 0.2, 1)'

4. Apply the picture lightbox to a picture component.

<a href="full.jpg" class="image-lightbox">
  // Add Image Here
imageSelector = document.querySelector('.image-lightbox');

5. More API strategies.

// remove an image element

// open the lightbox;

// close the lightbox

// destroy the instance

// check if is open

6. Bind/unbind event listeners.

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

Accessible Mobile-friendly Image Lightbox Library, Parvus Plugin/Github

See Demo And Download

Official Website(deoostfreese): Click Here

This superior jQuery/javascript plugin is developed by deoostfreese. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *