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.

responsive lightbox gallery, responsive lightbox image gallery jquery, jquery lightbox gallery, bs lightbox gallery demo, magnific popup, simple lightbox jquery

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 *