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