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
$ 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
</a>
imageSelector = document.querySelector('.image-lightbox');
prvs.add(imageSelector);

5. More API strategies.

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

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 *